js 模擬右鍵選單

阿新 • • 發佈：2019-01-31

不經意地被一位同事問起在javascript裡面如何檢測右鍵事件，並且遮蔽原來的右鍵選單，上網查詢一翻之後發現一些比較簡單的方法。如設定onmousedown，檢查其event.button的值是不是2（代表右鍵）。這個方法在FF和IE中都可用，但是在Maxthon（遨遊）中event.button卻是0，這讓我有點困惑，Maxthon不是IE核心的嗎？我只能設想Maxthon這個殼是做過手腳的。然而如果設定onmouseup，其event.button值就是2了。所以如果檢測右鍵的話，是設定其onmouseup即可。

document.getElementById("test").onmouseup=function(oEvent) {
    if (!oEvent) oEvent=window.event;
    if (oEvent.button==2) {
        //-- do something for user right click
        // alert("Mouse up");
    }
}

但是如果還需要遮蔽右鍵的話，還是用oncontextmenu比較簡單，但這時就不是檢測右鍵，而是檢測是否彈出上下文選單。遮蔽的方法跟遮蔽其他預設行為的方法是一樣的，一般來說都是有效的，不過因為某些瀏覽器有禁止禁止彈出右鍵選單的功能，所以如果需要在使用者點選右鍵時做點事情，最好還是不要放在oncontextmenu中，而是放在onmouseup中並檢測右鍵，附加oncontextmenu來遮蔽原來的選單。

document.getElementById("test").oncontextmenu=function(event) {
    //-- do something here
    // alert("ContextMenu Popup");
    //-- prevent the default behavior
    if (document.all) {
        window.event.returnValue = false;}// for IE
    else {
        event.preventDefault();}
    };

阻止右鍵選單是否可以直接簡單的return false??

通過一些簡單的測試，可以發現在FF和在IE存在著有趣的區別。
在onmouseup和oncontextmenu事件處理中都使用alert，可以看出來是先執行onmouseup事件再到oncontextmenu的，在IE中，兩者會非常連貫的在一起執行，（均認為是發生在test元素上的事件），而在FF裡面則不是（前提是test元素所佔區域比較小，當alert彈出時需要移動滑鼠才能點選'OK'的情況下），它會先執行onmouseup，alert出來之後，移動滑鼠點選'OK'，這時還是會彈出選單的，但是如果不移開滑鼠，而是直接按Enter確認的話，這時它就會認為是在test元素上觸發的事件了。可以理解為是IE 和 Firefox中的事件機制的細節區別。當然我們很少會應用到連續事件的，就無須注意到這點區別了，把需要的事件處理完整的寫在一個處理方法裡面就是最簡單有效的解決方案了。

藍色理想上的一個例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定義多級右鍵選單</title>
<style type="text/css">
html,body{height:100%;overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;}
ul{list-style-type:none;}
#rightMenu{position:absolute;top:-9999px;left:-9999px;}
#rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(http://js.fgm.cc/learn/lesson6/img/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}
#rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}
#rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(http://js.fgm.cc/learn/lesson6/img/arrow.png);}
#rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px;}
#rightMenu ul ul{display:none;position:absolute;}
</style>
<script type="text/javascript">
var getOffset = {
	top: function (obj) {
		return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
	},
	left: function (obj) {
		return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
	}	
};
window.onload = function ()
{
	var oMenu = document.getElementById("rightMenu");
	var aUl = oMenu.getElementsByTagName("ul");
	var aLi = oMenu.getElementsByTagName("li");
	var showTimer = hideTimer = null;
	var i = 0;
	var maxWidth = maxHeight = 0;
	var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
	
	oMenu.style.display = "none";
	
	for (i = 0; i < aLi.length; i++)
	{
		//為含有子選單的li加上箭頭
		aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");
		
		//滑鼠移入
		aLi[i].onmouseover = function ()
		{
			var oThis = this;
			var oUl = oThis.getElementsByTagName("ul");
			
			//滑鼠移入樣式
			oThis.className += " active";			
			
			//顯示子選單
			if (oUl[0])
			{
				clearTimeout(hideTimer);				
				showTimer = setTimeout(function ()
				{
					for (i = 0; i < oThis.parentNode.children.length; i++)
					{
						oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
						(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
					}
					oUl[0].style.display = "block";
					oUl[0].style.top = oThis.offsetTop + "px";
					oUl[0].style.left = oThis.offsetWidth + "px";
					setWidth(oUl[0]);
					
					//最大顯示範圍					
					maxWidth = aDoc[0] - oUl[0].offsetWidth;
					maxHeight = aDoc[1] - oUl[0].offsetHeight;
					
					//防止溢位
					maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");
					maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")
				},300);
			}			
		};
			
		//滑鼠移出	
		aLi[i].onmouseout = function ()
		{
			var oThis = this;
			var oUl = oThis.getElementsByTagName("ul");
			//滑鼠移出樣式
			oThis.className = oThis.className.replace(/\s?active/,"");
			
			clearTimeout(showTimer);
			hideTimer = setTimeout(function ()
			{
				for (i = 0; i < oThis.parentNode.children.length; i++)
				{
					oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
					(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
				}
			},300);
		};
	}	
	
	
	//自定義右鍵選單
	document.oncontextmenu = function (event)
	{
		var event = event || window.event;
		oMenu.style.display = "block";
		oMenu.style.top = event.clientY + "px";
		oMenu.style.left = event.clientX + "px";
		setWidth(aUl[0]);
		
		//最大顯示範圍
		maxWidth = aDoc[0] - oMenu.offsetWidth;
		maxHeight = aDoc[1] - oMenu.offsetHeight;
		
		//防止選單溢位
		oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");
		oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");
		return false;
	};
	
	//點選隱藏選單
	document.onclick = function ()
	{
		oMenu.style.display = "none"	
	};
	
	//取li中最大的寬度, 並賦給同級所有li	
	function setWidth(obj)
	{
		maxWidth = 0;
		for (i = 0; i < obj.children.length; i++)
		{
			var oLi = obj.children[i];			
			var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2
			if (iWidth > maxWidth) maxWidth = iWidth;
		}
		for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px";
	}
};
</script>
</head>
<body>
<center>自定義右鍵選單，請在頁面點選右鍵檢視效果。</center>
<div id="rightMenu">
    <ul>
        <li><strong>JavaScript 學習</strong></li>
        <li>
            第一課
            <ul>
                <li>網頁特效原理分析</li>
                <li>響應使用者操作</li>
                <li>提示框效果</li>
                <li>事件驅動</li>
                <li>元素屬性操作</li>
            </ul>
        </li>
        <li>
            第二課
            <ul>
                <li>改變網頁背景顏色</li>
                <li>函式傳參</li>
                <li>高重用性函式的編寫</li>
                <li>126郵箱全選效果</li>
                <li>迴圈及遍歷操作</li>
            </ul>
        </li>
        <li>
            第三課
            <ul>
                <li>
                    JavaScript組成
                    <ul>
                        <li>ECMAScript</li>
                        <li>DOM</li>
                        <li>BOM</li>
                        <li>JavaScript相容性來源</li>
                    </ul>
                </li>
                <li>JavaScript出現的位置、優缺點</li>
                <li>變數、型別、typeof、資料型別轉換、變數作用域</li>
                <li>
                	閉包
                    <ul>
                        <li>什麼是閉包</li>
                        <li>簡單應用</li>
                        <li>閉包缺點</li>
                    </ul>
                </li>
                <li>運算子</li>
                <li>程式流程控制</li>
                <li>
                    定時器的使用
                    <ul>
                        <li>setInterval</li>
                        <li>setTimeout</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

js 模擬右鍵選單

js 模擬右鍵選單

js jQuery 右鍵選單清屏

js 禁用右鍵選單、拖拽、選中、複製

zTree結合jquery.contextMenu.js實現右鍵選單

JQuery模擬網頁中自定義滑鼠右鍵選單

js靜止開啟右鍵選單和控制檯

SlwUi（Super Lightweight UI）前端js外掛菜單系列（3）右鍵選單SlwCtxMenu，導航選單SlwMenu

js自定義右鍵選單，點選自定義選單隱藏、顯示指定div

JS學習筆記 - 自定義右鍵選單、文字框只能輸入數字

Js實現——右鍵出現選單，選單中有新建，複製，剪下，貼上，刪除

JS元件系列——Bootstrap右鍵選單解決方案：ContextMenu

JS元件Bootstrap ContextMenu右鍵選單使用方法

jQuery,JS實現自定義滑鼠右鍵選單

JS自定義右鍵選單—複製到貼上板（jQuery和原生JS實現）

js實現瀏覽器右鍵選單，遮蔽預設選單

js實現自定義右鍵選單

win10新增自定義右鍵選單

vbs 系統右鍵選單新建新增新建vbs選項

JQueryEasyUI學習筆記十一 datagrid 右鍵選單凍結列

自己動手DIY滑鼠右鍵選單背景

js 模擬右鍵選單

相關推薦