收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#box{width:150px;height:120px;position:absolute;top:0px;display:none;}
li{
list-style-type:none;
width:150px;
height:40px;
background:#ddd;
border-bottom:1px dashed green;
text-align:center;
line-height:30px;
}
</style>
</head>
<body>
<div id="box">
<li>復制</li>
<li>粘貼</li>
<li>剪切</li>
<li>刪除</li>
</div>
</body>
<script>
// document.onmousedown = function(e){
// //解決兼容性問題
// var e = e || event;
// //alert(e.button);
// if (e.button== 2) {
// alert('你點擊了右鍵')
// }
// }
//菜單事件 右鍵事件
document.oncontextmenu=function(e){
//alert('右鍵事件')
var e = e || event;
document.title="X:"+e.clientX+"Y:"+e.clientY;
//讓你的自定義菜單顯示出來
box.style.display="block";
//讓你的自定義的菜單放置在鼠標坐標點上
box.style.left = e.clientX+'px';
box.style.top = e.clientY +'px';
//阻止默認行為 阻止默認菜單出現(xiàn)
return false;
}
//讓菜單消失的效果
document.onclick=function(){
box.style.display="none";
}
</script>
</html>點擊 "運行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號