自定义右键上下文列表-CSDN博客

本文链接：https://blog.csdn.net/Xu_cipu/article/details/103576965

Event:
contextmenu: The right button of the mouse is clicked (before the context menu is displayed).
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event

<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
	<title></title>
</head>
<body style="width: 100%;height: 100%;position: relative;">
	<ul id="contextMenu" style="display: none;list-style: none;margin: 0;padding: 0;">
		<li class="menuItem">item1</li>
		<li class="menuItem">item2</li>
		<li class="menuItem">item3</li>
	</ul>
</body>
<script type="text/javascript">
	document.body.oncontextmenu = function(event) {
		event.preventDefault(); //阻止默认事件发生
		var menu = document.getElementById("contextMenu");
		menu.style.display = "block";
		menu.style.position = "absolute";
		menu.style.left = event.clientX+"px";
		menu.style.top = event.clientY+"px";
	}
	document.body.onclick = function(event) { //隐藏列表
		var menu = document.getElementById("contextMenu");
		menu.style.display = "none";
	}
</script>
</html>

效果：
在这里插入图片描述
页面上的右键上下文菜单变成了自定义的<ul>列表