event document.oncontextmenu 自定义默认右键菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div1{
				position: absolute;
				width: 100px;
				background: #ccc;
				border: 1px solid black;
				display: none;
			}
		</style>
		<script>
		
			document.oncontextmenu = function(ev){
				var oEvent = ev || event;
				var oDiv = document.getElementById("div1");
				
				oDiv.style.display = "block";
				oDiv.style.left = oEvent.clientX +"px";
				oDiv.style.top = oEvent.clientY +"px";
				
				return false;//阻止默认事件
			}
			//点击其他地方的时候消失右键菜单
			document.onclick = function(){
				var oDiv = document.getElementById("div1");
				oDiv.style.display = "none";
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li>1111</li>
				<li>2222</li>
				<li>3333</li>
				<li>4444</li>
			</ul>
		</div>
		
	</body>
</html>

  

posted @ 2016-03-12 15:52  mingjixiaohui  阅读(1517)  评论(0编辑  收藏  举报