javascript 鼠标按钮button属性

这里需要注意的是：
只有在主鼠标按钮被单击时，才会触发click事件，因此检测按钮的信息并不是必要的。

但对于mousedown和mouseup事件来说，则在其event对象存在一个button属性，表示按下或释放的按钮。
DOM的button属性可能有如下3个值：0表示鼠标按钮，1表示中间的鼠标按钮（鼠标滚轮按钮），2表示次鼠标按钮。

在常规设置中，主鼠标按钮就是鼠标左键，而次鼠标按钮就是鼠标左键。
IE也提供了button属性，但这个属性的值与DOM的button属性有很大的差异。

DOM模型下的button属性比IE模型下的button属性更简单也更为实用，因为同时按下多个鼠标按钮的情形十分罕见。

最常见的做法就是将IE模型规范化为DOM方式，毕竟除IE之外的其它浏览器都原生支持DOM模型。
而对主、中、次按钮的映射并不困难，只要将IE的其它选项分别转换成如同按下这三个按钮中的一个即可（同时将住按钮作为优先选取的对象）。

换句话说IE中返回的5和7会被转换成DOM模型中的0.
由于单独使用能力检测无法确定差异，因此必须另辟蹊径。

支持DOM版鼠标事件的浏览器可以通过hasFearture()方法来检测，所以可以再为EventUtil对象添加如下getButton()方法：

var EventUtil = {
    getEvent: function (event) {
        return event ? event : window.event;
    },
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getButton: function (event) {
        if (document.implementation.hasFeature("MouseEvents", "2.0")) {
            return event.button;
        } else {
            switch (event.button) {
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4:
                return 1;
            }
        }
    }
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mousedown", function (event) {
    event = EventUtil.getEvent(event);
    alert(EventUtil.getButton(event));
});

通过检测“MouseEvents”这个特性，就可以确定event对象中存在的button属性中是否包含正确的值。
如果测试失败，说明是IE，就必须对相应的值进行规范化。

以上例子中，为一个<div>元素添加了一个onmousedown事件处理程序。
当在这个元素上按下鼠标按钮时，会有警告框显示按钮的代码。
在使用onmouseup事件处理程序时，button的值表示释放的是那个按钮。
此外，如果不是按下或释放了主鼠标按钮，Opera不会触发mouseup或mousedown事件。