使用JS实现局部自定义右键菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_38760069/article/details/110818887

本文介绍如何利用JavaScript、HTML和CSS实现页面特定区域的鼠标右键菜单自定义，包括效果展示和详细源代码解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、效果展示
二、源代码
总结

前言

html局部自定义鼠标右键菜单
局部！
局部！
局部！
重要的关键词说三遍！

一、效果展示

局部自定义鼠标右键菜单

二、源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#TextBox{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
			}
			#menu{
				position: absolute;
				border: 1px solid #000;
			}
			#menu > div:nth-child(2){
				border-top: 1px solid #000;
			}
			#menu > div:nth-child(3){
				border-top: 1px solid #000;
			}
			#menu > div:nth-child(4){
				border-top: 1px solid #000;
			}
			#menu > div:hover{
				cursor: pointer;
				background-color: #0078E7;
			}
		</style>
	</head>
	<body>
		<div id="TextBox">
			<div id="menu">
				<div>自定义菜单</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				var TextBox = document.getElementById("TextBox");
				var ul = document.getElementById("menu"); //获取ul节点对象
				ul.style.display = "none";
				/*为document绑定鼠标右键菜单事件*/
				TextBox.oncontextmenu = function(e){
					var _event = window.event||e;  //事件对象
					var x  = _event.clientX; // 鼠标的x坐标
					var y =  _event.clientY; //鼠标的y坐标
		 
					ul.style.display = "block";
					ul.style.left = x + "px";  //改变ul的坐标
					ul.style.top = y  + "px";  
					//阻止默认行为
					if(_event.preventDefault){
						_event.preventDefault();  //标准格式
					}else{
						_event.returnValue = false; //IE格式
					}
				}
				TextBox.onclick = function(){
					ul.style.display = "none";
				}
			}
		</script>
	</body>
</html>