自定义菜单绑定

最新推荐文章于 2022-10-22 16:26:49 发布

weixin_33688840

最新推荐文章于 2022-10-22 16:26:49 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zz334396884/p/7543632.html

本文介绍了一种使用HTML、CSS和JavaScript实现自定义上下文菜单的方法。通过监听文本区域的右键点击事件，并利用绝对定位展示菜单，可以有效增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7     textarea{ width: 200px;height: 100px;}
 8     #menu{width: 50px;background: red; position: absolute; display: none;}
 9 </style>
10 </head>
11 <body>
12     <textarea id="text"></textarea>
13     <ul id="menu">
14         <li>菜单1</li>
15         <li>菜单2</li>
16         <li>菜单3</li>
17     </ul>
18 </body> 
19 </html>

<script>
 //跨浏览器添加事件
 function addEvent(obj,type,fn){
     if (obj.addEventListener) {
        obj.addEventListener(type,fn,false);
     }else if (obj.attachEvent) {
        obj.attachEvent('on'+ type,fn);
     }
 }


//清楚默认行为兼容
function preDef (evt) {
    var e = evt || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}


addEvent(window,'load',function(){
    var text = document.getElementById('text');
    addEvent(text,'contextmenu',function(evt){
    preDef(evt);                                //取消菜单默认行为
    var menu = document.getElementById('menu');
    var e = evt || window.event;
    menu.style.left = e.clientX + "px";            //获取鼠标坐标，定位菜单跟着鼠标走
    menu.style.top = e.clientY + "px";
    menu.style.display = 'block';
    addEvent(document,'click',function(){        //鼠标左击隐藏菜单
        menu.style.display = 'none';
    });
    });
});

</script>