使用contextMenu实现上下文菜单（重点：contextmenu/relatedTarget）

最新推荐文章于 2024-04-21 09:44:34 发布

zd10101501

最新推荐文章于 2024-04-21 09:44:34 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/danzhang1010/article/details/30282275

版权

本文介绍了如何在web页面中利用contextMenu事件模拟操作系统的上下文菜单功能。通过为document注册事件处理器，捕获鼠标位置，并结合mouseout和mouseover事件控制菜单的显示与隐藏。关键在于理解和运用contextmenu事件及其event.relatedTarget属性。

摘要由CSDN通过智能技术生成

在操作系统中，通过单击鼠标右键，可以调出上下文菜单，在web页面中，也可以实现类似的功能，实现的方式是通过注册给元素注册contexmeun事件，该事件是冒泡的，因此可以为document指定一个事件处理器（类似的事件委托方式），用于处理该类事件，由于该事件输入鼠标类事件，所以可以通过事件对象获取到鼠标的坐标。此外通过mouseout和mouseover事件来决定上下文菜单的出现和消失。

<!DOCTYPE html>
<html>
<meta charset='utf-8'>
<head>
	<title>	HTML5 EVENT-contextmeau</title>
	<style type="text/css">
	.contextMenu {
		position: absolute;
		z-index: 0;
		visibility: hidden;
		list-style-type: none;
		margin:0px;
		padding:0px;
		font-size: 11px;
		width: 82px;
		background-color: #fcfcfc;
	}
	.contextMenu li{
		width: 80px;
		height: 30px;
		border:1px solid grey;
		display: block;
		text-align: center;
		vertical-align: middle;
		line-height: 30px;
		l
	}
	#nav{
		border: 1px solid green;
	}
	</style>
</head>
<body>
<div id='nav'>
	this is