获取或设置当前窗口contextmenu事件的事件处理函数

在浏览器中 鼠标右键点击会显示默认的 自带的菜单，那么如何禁止 和更改呢？

1) 禁止右键

window.oncontextmenu = funcRef;　　

funcRef是个函数引用 　　　　

举例说明：

window.oncontextmenu = function () {

　 return false; 　
} 　　

该窗口禁止使用右键 

2)更改 （自定义右键菜单）

html结构

 1 <ul id="menu">
 2     <li>重命名</li>
 3     <li>删除</li>
 4     <li>移动到</li>
 5     <li class="more">更多 >
 6         <ul>
 7             <li>二级菜单</li>
 8             <li>二级菜单</li>
 9             <li>二级菜单</li>
10             <li>二级菜单</li>
11         </ul>
12     </li>
13 </ul>

css样式

 1 ul{
 2         list-style: none;
 3         padding: 0;
 4         border:1px solid #000;
 5         border-bottom: none;
 6         width:200px;
 7         position: absolute;
 8          display: none;
 9   }
10  li{
11         line-height: 20px;
12         padding:5px;
13         border-bottom:1px solid #000;
14         position: relative;
15     }

javaScript

右键点击事件： oncontextmenu

获取元素

var menu = document.querySelector('#menu');

var more = menu.querySelectorAll('.more');

如果更多有内容就显示出来

 1   for(var i=0,l=more.length;i<l;i++){
 2         more[i].onmouseover = function(){
 3             var ul = this.querySelector('ul');
 4             ul.style.display = 'block';
 5             ul.style.left = this.offsetWidth+'px';
 6             ul.style.top = 0;
 7   };
 8  more[i].onmouseout = function(){
 9             var ul = this.querySelector('ul');
10             ul.style.display = 'none';
11         };
12   }

设置右键菜单

 1 document.oncontextmenu = function(ev){
 2 
 3   var ev = ev||event;
 4   ev.preventDefault();//阻止默认行为
 5 
 6   var x = ev.clientX;// 获取鼠标位置
 7   var y = ev.clientY;
 8 
 9   menu.style.display = 'block';
10   menu.style.left = x+'px';
11  menu.style.top = y+'px';
12 
13  };

点击取消右键菜单

document.onclick = function(){
   menu.style.display = 'none';
};

 

posted @ 2017-12-11 22:56  王子晚安  阅读(224)  评论(0)  编辑  收藏  举报