<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin:0;padding:0;}
ul, li{list-style:none;}
li{margin: 5px 10px;}
#context-menu{width:150px;height:200px;border:1px solid black;
background:lightblue;display:none;position:absolute;top:0;left:0;}
</style>
<body>
自定义右键菜单
<div id="context-menu">
<ul>
<li><a href="#">功能1-1
</a></li>
<li><a href="#">功能1-2
</a></li>
<li><a href="#">功能1-3
</a></li>
<li><hr /></li>
<li><a href="#">功能2-1
</a></li>
<li><a href="#">功能2-2
</a></li>
</ul>
</div>
</body>
<script>
var oContextMenu = document.getElementById('context-menu');
document.oncontextmenu = function(e){
e = e || event;
oContextMenu.style.left = e.clientX + 'px';
oContextMenu.style.top = e.clientY + 'px';
oContextMenu.style.display = 'block';
return false;
}
document.onclick = function(){
oContextMenu.style.display = 'none';
}
</script>
</html>
转载请注明原文地址: https://www.6miu.com/read-85485.html
