用js实现鼠标右键菜单栏

最新推荐文章于 2021-11-06 16:53:56 发布

土生土长的IU

最新推荐文章于 2021-11-06 16:53:56 发布

阅读量3.3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/84573426

版权

javascript 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

静态页面实现

HTML：

<!DOCTYPE html>
<html>
<head>
	<title>右键菜单实现</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
		
		<ul id='list'>
			<li>选项一</li>
			<li>选项二</li>
			<li>选项三</li>
			<li>选项四</li>
		</ul>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

css：

ul{
	display: none;
	box-shadow: 0px 0px 5px #f4979a;
	text-align: center;
	width: 160px;
	height: 200px;
	position: absolute;
	margin: 0;
	padding: 0;
}
li{
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	list-style: none;
	border: 1px solid #eee;
}

动态效果

js：

var el=document.getElementById('list'); //获取右键菜单
document.oncontextmenu=function(ev){
	var ev=ev||event; //兼容性语句 
	ev.preventDefault();
	var x=ev.clientX;
	var y=ev.clientY;
	el.style.display='block';
	el.style.left=x+'px';
	el.style.top=y+'px';
	document.onclick=function(){  //再次点击菜单消失
		el.style.display='none';
	}
}

土生土长的IU

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用js实现鼠标右键菜单栏

静态页面实现 HTML：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;右键菜单实现&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="index.css"&gt;&lt;
复制链接

扫一扫