用js实现鼠标右键菜单栏

秒速五厘米 2022-04-13 06:17 331阅读 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';
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标右键菜单怎么截图？

鼠标右键菜单怎么截图有时候截图的需要截取鼠标的右键菜单，可是一截图他就自己消失了。。。。。怎么办截图工具，就是qq自带的截图，QQ截图的热键为Ctrl+Alt+A

╰半夏微凉°/ 2023年07月05日 13:11/ 0 赞/ 43 阅读

相关 QT鼠标右键弹出菜单

在用QT编程时，有时候要实现鼠标右键弹出菜单的功能．下面代码演示鼠标右键弹出菜单． 1.新建一个QT工程，点击MainWindow.ui，鼠标右键Go to slot....

小鱼儿/ 2023年06月06日 04:00/ 0 赞/ 56 阅读

相关全局自定义鼠标右键菜单

文章目录前言一、效果展示二、源代码总结 -------------------- 前言 html全局自定义鼠标右键菜单 -

青旅半醒/ 2022年12月27日 02:00/ 0 赞/ 311 阅读

相关局部自定义鼠标右键菜单

文章目录前言一、效果展示二、源代码总结 -------------------- 前言 html局部自定义鼠标右键菜单局

╰+攻爆jí腚メ/ 2022年12月27日 01:59/ 0 赞/ 271 阅读

相关定制鼠标右键新建菜单选项

定制鼠标右键新建菜单选项在注册表中，HKEY\_CLASSES\_ROOT中找到要添加的文件拓展名， word 在\:\\windows\\shellnew\\新建 w

痛定思痛。/ 2022年10月02日 13:49/ 0 赞/ 312 阅读

相关 JS 取消鼠标右键

$(document).bind('contextmenu copy paste cut', function (event) { if ($

男娘i/ 2022年09月24日 08:30/ 0 赞/ 220 阅读

相关鼠标右键菜单

当用户在 <div> 元素上右击鼠标时执行 JavaScript ： <div oncontextmenu="myFunction()" contextmenu="

古城微笑少年丶/ 2022年05月08日 03:40/ 0 赞/ 405 阅读

相关用js实现鼠标右键菜单栏

静态页面实现 HTML： <!DOCTYPE html> <html> <head> <title>右键菜单实现</

秒速五厘米/ 2022年04月13日 06:17/ 0 赞/ 332 阅读

相关 JS添加右键菜单

在前端开发的时候，会用到“右键菜单”，如给div添加右键菜单等，示例： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

向右看齐/ 2022年02月21日 04:53/ 0 赞/ 574 阅读

相关基于jQuery的鼠标右键菜单

对于自制的鼠标右键功能，我们应该考虑哪些因素呢？一、涉及因素 > 1、阻止默认鼠标右键事件。 > > 3、右键事件，使菜单出现。 > > 2、考虑右键

喜欢ヅ旅行/ 2021年09月15日 12:02/ 0 赞/ 487 阅读