Leegorous

不经意地被一位同事问起在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中的事件机制的细节区别。当然我们很少会应用到连续事件的，就无须注意到这点区别了，把需要的事件处理完整的写在一个处理方法里面就是最简单有效的解决方案了。

PS: 这post是很久之前（2007-09-06）发布在旧blog里头的，现在拿出来翻炒一下～