js之contextmenu自定义右键菜单 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
				position: absolute;
				border: 1px solid #000000;
				width: 40px;
				cursor: pointer;
				display: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>htnl</li>
			<li>css</li>
			<li>js</li>
			<li>php</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector('ul');
			document.addEventListener('contextmenu', function(e) {
				var ev = window.event || e;
				//pageX:鼠标当前位置 距离页面左侧 的 距离
				//pageY:鼠标当前位置 距离页面顶部 的 距离
				//clientX:鼠标当前位置 距离可视窗口左侧 的 距离
				//clientY:鼠标当前位置 距离可视窗口顶部 的 距离
				var x = ev.pageX;
				var y = ev.pageY;
				ul.style.left = x + 'px';
				ul.style.top = y + 'px';
				ul.style.display = 'block';
				//阻止默认行为
				ev.preventDefault();
			})
			document.onclick = function() {
				ul.style.display = 'none';
			}
		</script>
	</body>
</html>

 

posted @ 2020-04-08 21:35  JackieDYH  阅读(5)  评论(0)  编辑  收藏  举报  来源