用js实现鼠标右键菜单栏

秒速五厘米 2022-04-13 06:17 227阅读 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 条评论，227人围观）

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

相关阅读

相关鼠标右键菜单-复制删除粘贴剪切

功能分析： 1、鼠标右键点击元素节点，如果没有选中元素节点中的内容，则点击复制会复制整个元素节点 2、如果元素节点内容被选中则复制元素节点中选中的内容 3、点击剪切，

布满荆棘的人生/ 2023年01月10日 10:06/ 0 赞/ 197 阅读

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

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

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

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

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

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

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

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

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

相关 JS 取消鼠标右键

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

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

相关鼠标右键菜单

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

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

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

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

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

相关 JS添加右键菜单

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

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

相关 el-tree鼠标右键自定义菜单

el-tree鼠标右键自定义菜单代码代码代码 <template> <div id="app">

一时失言乱红尘/ 2021年09月23日 14:02/ 0 赞/ 662 阅读

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

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

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