自定义菜单绑定

最新推荐文章于 2021-04-09 11:09:06 发布

weixin_33688840

最新推荐文章于 2021-04-09 11:09:06 发布

阅读量62

点赞数

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

版权

 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>

转载于:https://www.cnblogs.com/zz334396884/p/7543632.html

weixin_33688840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义菜单绑定

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: 1...
复制链接

扫一扫