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

Posted 2020-10-17

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

1)  禁止右键

window.oncontextmenu = funcRef;
//funcRef是个函数引用

　　　　列子：

　　　　window.oncontextmenu = function () {
　　　　   return false;
　　　　}
　　　　//该窗口禁止使用右键

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

html结构

<ul id="menu">
　　<li>重命名</li>
　　<li>删除</li>
　　<li>移动到</li>
　　<li class="more">更多 >
　　　<ul>
　　　　　<li>xxxx</li>
　　　　　<li>xxxx</li>
　　　　　<li>xxxx</li>
　　　　　<li>xxxx</li>
　　　</ul>

　　</li>

</ul>

css 样式

ul{
　　list-style: none;
　　padding: 0;
　　border:1px solid #000;
　　border-bottom: none;
　　width:200px;
　　position: absolute;
　　display: none;
}
li{
　　line-height: 20px;
　　padding:5px;
　　border-bottom:1px solid #000;
　　position: relative;
}

javascript

/*
* 右键点击事件： oncontextmenu
*/

 

// 获取元素

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

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

//显示二级菜单

//如果菜单下有更多内容 就显示出来
for(var i=0,l=more.length;i<l;i++){
　　more[i].onmouseover = function() {
　　　　var ul = this.querySelector(‘ul‘);
　　　　ul.style.display = ‘block‘;
　　　　ul.style.left = this.offsetWidth+‘px‘;
　　　　ul.style.top = 0;
};

more[i].onmouseout = function() {
　　　var ul = this.querySelector(‘ul‘);
　　　ul.style.display = ‘none‘;
　　};
}

// 定义右键菜单

document.oncontextmenu = function(ev){

　　var ev = ev||event; //处理兼容
　　ev.preventDefault();//阻止默认行为

　　// 获取鼠标位置

　　var x = ev.clientX;
　　var y = ev.clientY;

　　menu.style.display = ‘block‘;
　　menu.style.left = x+‘px‘;
　　menu.style.top = y+‘px‘;

};

// 点击 菜单消失

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