浅谈-滚轮事件
那先给大家上一张图吧!! 先了解了解
IE6+ 、Chrome 、Safari、Opera 9.5+
事件: mousewheel 滚轮信息保存在:wheelDelta 也就是图中的数值部分,从其值的正负可以得出出滚轮的方向
支持事件冒泡,这个事件在任何元素都会触发,最终会冒泡到document(IE8) 或 window(IE9 Opera Chrome Safari)
而 event 对象保存了 mousewheel事件的基本信息。
基于Opera9.5 以及之下的表现略不同,如下图
基于Firefox 时,也支持滚轮事件,只是事件对象不一样罢了 ,还有一个不同点就是滚轮信息保存在了 detal 属性中
事件:DOMMouseScroll 有关鼠标滚轮信息则保存在: detail
相信聪明的大家应该也对滚轮也有大概的印象了吧!! 有这些基本理论了那我们还缺少实战对吧!那下面从实例中来感受感受吧
实例一 :
var EventUtil = { 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; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, getEvent: function (event) { return event ? event : window.event; }, getTarget: function (event) { return event.target || event.srcElement; }, preventDefault: function (event) { if (event.preventDefault) { event.preventDefault; } else { event.returnValue = false; } }, stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }, getRelatedTarget:function(event){ if(event.relatedTarget){ return event.relatedTarget; }else if(event.toElement){ return event.toElement; }else if(event.fromElement){ return event.fromElement; }else{ return null; } }, 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; } } } };
EventUtil.addHandler(document,"mousewheel",function(){ console.log("g"); }); var div = document.getElementById("left"); EventUtil.addHandler(div,"mousewheel",function(event){ event = EventUtil.getEvent(event); console.log(event.wheelDelta); });
在 IE 、Chrome 、Safari、Opera 9.5+ 中表现如下:
鼠标向上滚动时: + 120 、g
鼠标向下滚动时: - 120 、 g
实例二:
EventUtil.addHandler(document,"DOMMouseScroll",function(){ console.log("g"); }) var div = document.getElementById("left"); EventUtil.addHandler(div,"DOMMouseScroll",function(event){ event = EventUtil.getEvent(event); console.log(event.detail); });
在 Firefox 中, 表现如下
鼠标向上滚动时: - 3 、 g
鼠标向下滚动时: + 3 、 g
从上面两个实例可以看出
若要给出跨浏览器环境下的解决方案,可以使用下面的方式
var EventUtil = { getWheelDelta:function(event){ if(event.wheelDelta){ return event.wheelDelta; }else{ return -event.detail * 40; } } }
从上面主要添加 如果存在 wheelDelta 则表示Firefox 之外的浏览器,如果是则对其进行相应处理,达到与其他浏览器一样的效果
function handleMouseWheel(event) { event = EventUtil.getEvent(event); console.log(EventUtil.getWheelDelta(event));
}
EventUtil.addHandler(document,"DOMMouseScroll",handleMouseWheel)
EventUtil.addHandler(document,"mousewheel",handleMouseWheel)