当用户点击鼠标右键的时候
oncontextmenu事件被触发
js禁用鼠标右键菜单
window.oncontextmenu=function(e){
//取消默认的浏览器自带右键 很重要！！
e.preventDefault();
}
js自定义鼠标右键菜单
html准备自定义菜单项
<div id="menu">
<div class="menu">功能1</div>
<div class="menu">功能2</div>
<div class="menu">功能3</div>
<div class="menu">功能4</div>
<div class="menu">功能5</div>
</div>
css设置菜单项样式
#menu{
width: 0; /*设置为0 隐藏自定义菜单*/
height: 125px;
overflow: hidden; /*隐藏溢出的元素*/
box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
position: absolute; /*自定义菜单相对与body元素进行定位*/
}
.menu{
width: 130px;
height: 25px;
line-height: 25px;
padding: 0 10px;
}
js控制菜单的显示与隐藏
window.oncontextmenu=function(e){
//取消默认的浏览器自带右键 很重要！！
e.preventDefault();
//获取我们自定义的右键菜单
var menu=document.querySelector("#menu");
//根据事件对象中鼠标点击的位置，进行定位
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';
//改变自定义菜单的宽，让它显示出来
menu.style.width='100px';
menu.style.height='auto';
}
//鼠标左键任意位置单击, 关闭右键菜单
window.onclick=function(e){
//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
document.querySelector('#menu').style.height=0;
}
