【记】屏蔽浏览器shift+鼠标滚轴事件

    最近在工作中有一个这样的需求，就是一个列表，每个列表元素中有一个勾选框（checkbox），用户可以按住shift，点击一个勾选框，再点击另一个勾选框，那么在这两个勾选框之间的所有选项都选中。这个需求本身很简单，但是，带来了一些比较尴尬的问题，那就是，如果列表足够多，可能出现浏览器显示不下，出现滚动条。这时，如果用户按住shift点击了第一个，然后通过鼠标滚轮拉到最下面，点击最后一个就会出现问题。什么问题呢？就是按住shift时，滚动鼠标滚轴，就会触发浏览器的默认事件，页面前进或者后退。这个问题非常头疼，因为用户按住shift+滚轴的情况非常普遍。一个折中的办法就是屏蔽掉本页的shift+滚轴的默认事件。这样，如果用户需要滚动页面，可以通过拖拽滚动条实现。

    下面就来说下如何屏蔽掉shift+滚轴的默认事件。我在网上找了一段时间，发现，大多都是屏蔽组合键的，很少涉及滚轴的，因此，我决定自己写一个屏蔽默认事件的代码。直接上代码：

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;
        }
    },
    getWheelDelta: function (e) {
        if(e.shiftKey){
            e.preventDefault ? e.preventDefault(): e.returnValue= false;
        }    
    }
};
function handleMouseWheel(event) {
    event = EventUtil.getEvent(event);
    var delta = EventUtil.getWheelDelta(event);
}
EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);

     这里绑定了两个事件，一个是 mousewheel,一个是DOMMouseScroll。在FireFox下，鼠标的滚轴事件是mousewheel，其他的浏览器是DOMMouseScroll事件。其中，DOMMouseScroll事件必须通过addEventListener绑定。

     由于要尽可能让鼠标滚轴正常工作，因此，只有在按住shift的情况下，才去掉默认事件。在IE678中，event没有preventDefault方法，因此采用event.returnValue=false屏蔽默认事件。