自定义右键菜单

最新推荐文章于 2022-02-18 15:07:08 发布

weixin_30412167

最新推荐文章于 2022-02-18 15:07:08 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/babywin/p/6245792.html

在自定义右键菜单前，我们先了解一下事件默认行为：

事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情；
怎么阻止？
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;

//oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发
document.oncontextmenu = function() {
return false;    
}

示例：
1.样式：

#div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}

2.结构：

<body>
   <div id="div1"></div>
</body>

3.逻辑

<script>
window.onload = function() {
var oDiv = document.getElementById('div1'); 
   document.oncontextmenu = function(ev) {    //右键菜单事件
var ev = ev || event;      
      oDiv.style.display = 'block';    
      oDiv.style.left = ev.clientX + 'px';  // ev.clientX鼠标的横向距离
      oDiv.style.top = ev.clientY + 'px'; //  ev.clientY鼠标的纵向距离
return false;     
   }   
   document.onclick = function() {
      oDiv.style.display = 'none';
   }

}
</script>

分享技术，分享快乐！