使用JavaScript为H5添加右击事件

最新推荐文章于 2025-01-20 22:43:16 发布

梅比斯-维维亚米利欧

最新推荐文章于 2025-01-20 22:43:16 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签：右击菜单 H5 JavaScript

本文链接：https://blog.youkuaiyun.com/q1054733797/article/details/83744100

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在网页中实现右击菜单的方法，通过使用HTML、CSS和JavaScript，确保菜单在用户右击指定元素时准确显示。关键在于设置菜单的绝对定位，并监听右击事件以获取鼠标位置。

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

话不多说，直接上代码，其中需要注意的一点是为menu添加position: absolute;属性，这个属性的意思是菜单采用绝对位置，可以保证右击后菜单出现在自己想要的位置，而不受其他元素的影响

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>菜单</title>
		<style>
			#menu{
				display: none;
				width: 50px;
				border: solid black;
				position: absolute;
				background-color: aqua;
			}
			#list{
				width: 50px;
			}
		</style>
	</head>

	<body>
		<ol id="list" style="border: solid red;">
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
		</ol>
		<div id="message">
		</div>
		
		<!--
        	作者：1054733797@qq.com
        	时间：2018-11-05
        	描述：菜单选项
        -->
		<div id="menu">
			<a href="#" onclick="alert('菜单一')">菜单一</a><br/>
			<a href="#" onclick="alert('菜单二')">菜单二</a><br/>
			<a href="#" onclick="alert('菜单三')">菜单三</a>
		</div>
		
		<script>
			var menu = document.getElementById("menu");
			var list = document.getElementById("list");
			var message = document.getElementById("message");
			
			//为list添加右击事件
			list.oncontextmenu = function(e){
				var e = e || window.event;
				var x = e.clientX;
				var y = e.clientY;
				message.innerHTML = "x="+x+",y="+y;
				menu.style.display = "block";
        		menu.style.left = x + "px";
        		menu.style.top = y + "px"
				return false;
			}
			
			//为窗口添加点击事件，当点击list外的区域时，菜单消失
			document.onclick = function(e){
				var e = e || window.event;
				menu.style.display = "none";
			}
			
			//点击菜单时取消冒泡事件
			menu.onclick = function(e){
				var e = e || window.event;
				//IE中取消冒泡事件
				//e.cancelBubble = true;
				//其他浏览器取消冒泡事件
				e.stopPropagation();
			}
		</script>
	</body>

</html>