右键菜单自定义

最新推荐文章于 2024-08-17 13:44:45 发布

小森呀

最新推荐文章于 2024-08-17 13:44:45 发布

阅读量531

点赞数

分类专栏：小案例文章标签：右键事件菜单自定义

本文链接：https://blog.csdn.net/KEY2018/article/details/93657040

版权

小案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>右键菜单事件</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 150px;
				height: 240px;
				border: 1px solid darkgray;
				display: none;
				position: relative;
				left: 0px;
				top: 0px;
			}
			ul{
				list-style-type: none;
				text-align: center;
				line-height: 60px;
			}
			li:hover{
				background-color: darkgrey;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<ul>
				<li>刷 新</li>
				<li>复 制</li>
				<li>剪 切</li>
				<li>粘 贴</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var div=document.querySelector('div');
		document.addEventListener('contextmenu',function(e)//右键菜单事件
		{
			e.preventDefault();//取消右键菜单的默认行为
			div.style.display='block';
			div.style.left=e.clientX+'px';
			div.style.top=e.clientY+'px';
		})
		document.addEventListener('click',function()//左键点击菜单消失
		{
			div.style.display='none';
		})
	</script>
</html>