用js实现鼠标右键菜单栏

最新推荐文章于 2024-08-05 22:35:36 发布

2019ab

最新推荐文章于 2024-08-05 22:35:36 发布

阅读量856

点赞数

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

版权

javascript 专栏收录该内容

9 篇文章 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.οncοntextmenu=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.οnclick=function(){ //再次点击菜单消失
el.style.display='none';
}
}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。