oncontextmenu事件

时间:2023-03-08 17:38:38
oncontextmenu事件

oncontextmenu的作用是阻止浏览器默认的鼠标右键行为。

阻止弹出右键自带菜单

        document.oncontextmenu=function(){
console.log('你点击了右键');
return false;
}
模拟右键菜单
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#main{
width: 140px;
height: auto;
background: #ededed;
text-align: center;
display: none;
position: absolute;
}
</style>
<div id="main">
<ul>
<li>我是第一个选项</li>
<li>我是第二个选项</li>
<li>我是第三个选项</li>
<li>我是第四个选项</li>
</ul>
</div>
<script>
document.oncontextmenu=function(ev){
var oEvent = ev||event;
var Odiv = document.getElementById('main');
Odiv.style.display='block';
Odiv.style.left=oEvent.clientX+'px';
Odiv.style.top=oEvent.clientY+'px';
return false
};
var Odiv = document.getElementById('main');
document.onclick=function(){
Odiv.style.display='none';
} </script>