範例 - JavaScript 替換瀏覽器預設滑鼠右鍵選單

這次實作的功能是要替換瀏覽器在網頁被點擊滑鼠右鍵時跳出的選單
改成跳出自製的選單

滑鼠的一個點擊(click)就會引發3個事件
點擊滑鼠左鍵的話，依序是 onmousedown -> onmouseup -> onclick
如果按下的是滑鼠右鍵，則依序是 onmousedown -> onmouseup -> oncontextmenu

瀏覽器的預設右鍵選單通常在執行 oncontextmenu 前就會先出現(display)
所以我們就必須在 onmousedown or onmouseup 時事先處理 oncontextmenu 事件
在 firefox 18.0.1 時會發現其在 oncontextmenu 時處理的頁面狀態與點擊發生前相同
所以要對應 firefox 的跨瀏覽器處理，還要注意oncontextmenu事件是否使用前面事件的物件
實作程式碼如下：

<a href="javascript:void(0);"onmousedown="showDropdown(event, this);" ...>...</a>

function showDropdown(e, obj){
  var rightClicked;
    e = e || window.event;
    if (e.which)       // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
      rightClicked = e.which == 3;
    else if (e.button)  // IE, Opera
      rightClicked = e.button == 2;

    if(!rightClicked)  return;

    obj.oncontextmenu = function(e){
      if(e && e.stopPropagation){
           e.preventDefault();
            e.stopPropagation();
    }else{
            e = window.event;
            e.returnValue = false;  //for IE
            e.cancelBubble = true;
        }
        ....  //implement new menu show up
    }
}