js屏蔽鼠標右鍵默認事件以實現自定義菜單


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的!所以屏蔽鼠標右鍵事件暫時就先寫到這了。

喔,附張效果圖,沒圖的話會有很大困擾:









注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com