原生javascript实现自定义右键菜单首先，该需求需要拦截浏览器的右击事件，更改为自定义监听事件，可使用contex

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>自定义鼠标右键菜单</title>
	<style>
		/* 自定义右键菜单 */
		#menu {
			display: none;
			position: absolute;
			width: 150px;
			border: 1px solid #ccc;
			background: #eee;
		}

		#menu ul {
			margin: 5px 0;
		}

		#menu li {
			height: 30px;
			line-height: 30px;
			color: #21232E;
			font-size: 12px;
			text-align: center;
			cursor: default;
			list-style-type: none;
			border-bottom: 1px dashed #cecece;
		}

		#menu li:hover {
			background-color: #cccccc;
		}
	</style>
</head>

<body>
	<!-- 自定义鼠标右键菜单 -->
	<div id="menu">
		<ul>
			<li onclick="menuClick(1)">删除</li>
			<li onclick="menuClick(2)">多选</li>
			<li onclick="menuClick(3)">平移</li>
			<li onclick="menuClick(4)">运算符</li>
			<li onclick="menuClick(5)">中间事件</li>
		</ul>
	</div>
	<script>
		// 注意 取消默认行为 我们鼠标右键的时候 一般是弹出 浏览器的 属性 刷新等等的那个菜单
		// 阻止默认行为 就没有那个菜单出来了
		document.addEventListener('contextmenu', function (e) {
		// 这里书写你的操作
		console.log('触发了鼠标右键');
			e.preventDefault();
			menu.style.display = 'block';
			menu.style.left = e.clientX  + 'px';
			menu.style.top = e.clientY  + 'px';
		})


		
		// 鼠标点击其他位置时隐藏菜单
		document.onclick = function () {
			menu.style.display = 'none';
		}
		var menuClick = function (m) {
			if (m == "1") {
				alert("删除成功")
			} else if (m == "2") {
				alert("暂未开通")
			} else if (m == "3") {
				alert("暂未开通")
			} else if (m == "4") {
				alert("暂未开通")
			} else if (m == "5") {
				createInterEvent();  // 这里调用了我自定义的方法
			}
		}
	</script>
</body>

</html>