js屏蔽鼠标右键默认事件以实现自定义菜单

2017-12-19 08:22:21来源:CSDN作者:qq_16371909人点击

分享

2017-12-18日,2017年即将结束的日子里。

公司做了一个项目,主要难点在于实现公司组织架构图上,何谓组织架构图,如下便是:



这里的每个节点都有相应的右键菜单,说白了就跟你用xmind的体验是一样的,用户体验自然是很好的,毕竟开发了都接近一个礼拜,而且还要加班。

做公司项目嘛,就要求快,首先就是先在网上找现成的呗,最开始找的是OrgChart,可是它对数据格式的要求十分严格,增删节点的体验也并不是很好,样式也不算太好看。所以对它进行重写和新增功能是必然的,很不巧这任务落到我头上来了。

改写OrgChart过程中,遇到了很多自己记得不太清楚的知识,做项目的时候直接花十几分钟在网上就可以找到解决方案。但是我不是太放心,都做了详细记录,现在就回过头来把遇到的问题再捋一遍,加深一下记忆!

上面都是故事背景,反正是我的博客,阅读量也就这么点,干脆破罐子破摔,我想怎么写就怎么写,想写什么就写什么。以前的博客基本上就是一个问题+对应解决方案,多少伸手党拿了代码就直接走了,评论都没有一个。我又何必在乎这些人的感受呢,支持都是相互的!

第一个问题是:用js实现自定义鼠标右键菜单功能

要实现这个,首先必须屏蔽掉鼠标右键的默认事件,这里的利用的“oncontextmenu”事件,该事件在用户右击鼠标时触发并打开上下文菜单。所以代码自然就出来了:

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>鼠标右键事件</title>		<style>			* {				padding: 0;				margin: 0;			}						#tar {				height: 60px;				width: 220px;				background-color: #888888;				text-align: center;				line-height: 60px;			}						#menu {				display: none;				position: absolute;				background-color: #FF0000;				z-index: 2;			}						#menu ul li {				list-style: none;			}		</style>	</head>	<body>		<p id="tar">这里是一些内容			<menu id="menu">				<ul>					<li>选项1</li>					<li>选项2</li>					<li>选项3</li>				</ul>			</menu>		</p>		<script>			window.onload = function() {				var el = document.getElementById("tar");				var oMenu = document.getElementById("menu");				el.oncontextmenu = function(e) {					//左键--button属性=1,右键button属性=2					if(e.button == 2) {						e.preventDefault();						var _x = e.clientX,							_y = e.clientY;						oMenu.style.display = "block";						oMenu.style.left = _x + "px";						oMenu.style.top = _y + "px";					}				}			}		</script>	</body></html>

代码大概就是这样子的,顺便做了一个在合适的位置出现菜单的操作。

然后呢,目前在火狐、谷歌和IE9以上都是OK的!所以屏蔽鼠标右键事件暂时就先写到这了。

喔,附张效果图,没图的话会有很大困扰:








微信扫一扫

第七城市微信公众平台