js原生自定义鼠标右键菜单 -六月初技术站

js原生自定义鼠标右键菜单

六月初 JavaScipt 2019-02-25 14:42:39

js自定鼠标右键菜单预览：

实现完整代码：（对实现过程有兴趣的，可以查看下面对于代码的简要解释。任务紧的小伙伴，直接略过。拿代码干活！）

另一篇文章基于jq的一个自定义鼠标右键插件：《jq自定义鼠标右键插件之jquery.contextMenu.min.js》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			ul{list-style: none;}
			/*跟运动相关的模块都需要绝对定位*/
			#box1 {
				background: #CCCCCC;
				display: none;
				width: 160px;
				position: absolute;
			}
			#box1 li{
				padding: 8px;
				cursor: pointer;
			}
			#box1 li:hover{
				background: #0000FF;
				color: #fff;
			}
		</style>
		<script>
			//鼠标右键默认菜单事件
			document.oncontextmenu = function(ev) {
				var oevent = ev || event;

				var div1 = document.getElementById('box1');
				//弹出自定义菜单
				div1.style.display = 'block';
				//设置自定义菜单的坐标，达到鼠标右键的地方弹出自定义菜单
				div1.style.left = oevent.clientX + 'px';
				div1.style.top = oevent.clientY + 'px';

				//屏蔽右键默认菜单
				return false;
			}
			//点击页面任一地方，收起自定义菜单
			document.onclick = function() {
				var div1 = document.getElementById('box1');
				div1.style.display = 'none';
			}
		</script>
	</head>

	<body>
		<div id="box1">
			<ul>
				<li>六月初博客</li>
				<li>六月初博客站</li>
				<li>六月初个人博客站</li>
				<li>六月初个人博客网站</li>
			</ul>
		</div>
	</body>

</html>