在需要右鍵的地方加上 onmousedown="if(event.button == 2) alert('點擊右鍵了!');即可 不經意地被一位同事問起在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();
};
通過一些簡單的測試,可以發現在FF和在IE存在著有趣的區別。
在onmouseup和oncontextmenu事件處理中都使用alert,可以看出來是先執行onmouseup事件再到oncontextmenu的,在IE中,兩者會非常連貫的在一起執行,(均認為是發生在test元素上的事件),而在FF裡面則不是(前提是test元素所佔地區比較小,當alert彈出時需要移動滑鼠才能點擊'OK'的情況下),它會先執行onmouseup,alert出來之後,移動滑鼠點擊'OK',這時還是會快顯功能表的,但是如果不移開滑鼠,而是直接按Enter確認的話,這時它就會認為是在test元素上觸發的事件了。可以理解為是IE 和 Firefox中的事件機制的細節區別。當然我們很少會應用到連續事件的,就無須注意到這點區別了,把需要的事件處理完整的寫在一個處理方法裡面就是最簡單有效解決方案了。