在浏览器中 鼠标右键点击会显示默认的 自带的菜单,那么如何禁止 和更改呢?
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‘;
};