2015/04/28

在HTML element要處理left-click與right-click

被指派一個任務,頁面上的一個元件,當right-click與left-click時,要有不同的反應,IE 8也要能兼容,且必須在mouse up時才觸發。
如果是mouse down就比較好處理,若mouse up,這個mouse event會bubble up,無法用stopPropagation()來停止,所以就不能直接bind在mouseup上了

最後用了幾個方法組合起來,來達成這個需求,HTML的tag如下,bind onclick來處理left-click;bind oncontextmenu來處理right-click:
<a href="#" onclick="return handler(event)" oncontextmenu="return handler(event)">CLICK</a>
JavaScript的function則如下
  function handler(e, id) {
    var clickType = 1; //1:left-click; 3:right-click
    if (e.which) {
      clickType = e.which;
    } else if (e.type) {  // for IE 8
      if (e.type=="click") {
        clickType = 1;
      } else if (e.type=="contextmenu") {
        clickType = 3;
      } else {
        clickType = e.button+10;
      }
    }
    alert("click type: "+clickType);
    return false;
  }
在Chrome 42, FireFox 37, Opera 28, IE 11/8上測試都OK