当前位置: 移动技术网 > IT编程>网页制作>CSS > 用oncontextmenu事件单禁用右键菜单的方法步骤

用oncontextmenu事件单禁用右键菜单的方法步骤

2019年06月02日  | 移动技术网IT编程  | 我要评论

在html页面中添加如下代码,利用oncontextmenu 事件可以取消鼠标右键功能:

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

注意:所有都支持 oncontextmenu 事件,contextmenu元素只有 firefox 浏览器支持。

<script>

 window.document.oncontextmenu = function(){ 
//alert('请不要点击鼠标右键!');
return false;
}  
</script>
<!doctype html>  
<html>  
   
<head>  
<meta charset="utf-8">  
<title></title>  
<style type="text/css">  
#menu {  
height: 200px;  
width: 50px;  
border: 1px solid gray;  
background-color: antiquewhite;  
padding: 10px;  
display: none;  
position: absolute;  
}  
  
ul,  
li {  
margin: 0;  
padding: 0;  
list-style-type: none;  
line-height: 40px;  
}  
</style>  
</head>  
  
<body>  
<p id="menu">  
<ul>  
<li>复制</li>  
<li>粘贴</li>  
<li>运行</li>  
<li>工具</li>  
<li>帮助</li>  
</ul>  
</p>  
</body>  
<script type="text/javascript">  
var menu = document.getelementbyid("menu");  
document.oncontextmenu = function(ev) {  
var oevent = ev || event;  
//自定义的菜单显示  
menu.style.display = "block";  
//让自定义菜单随鼠标的箭头位置移动  
menu.style.left = oevent.clientx -200 + "px";  
menu.style.top = oevent.clienty -200 + "px";  
//return false阻止系统自带的菜单,  
//return false必须写在最后,否则自定义的右键菜单也不会出现  
return true;  
  
}  
//实现点击document,自定义菜单消失  
document.onclick = function() {  
  
menu.style.display = "none";  
}  
</script>  
  
</html>  

\

return true 错开仍能看到系统自带的菜单

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网