学习 JS滚轮事件(mousewheel/DOMMouseScroll)
2017-08-15 00:48 龙恩0707 阅读(2912) 评论(0) 编辑 收藏 举报学习 JS滚轮事件(mousewheel/DOMMouseScroll)
1-1 滚轮事件兼容性的差异
IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefox浏览器使用 DOMMouseScroll 事件,一个最简单的测试demo如下:
HTML代码如下:
<div style="height:2000px"></div>
页面滚动条滚动的时候,使用js去监听事件如下:
document.body.onmousewheel = function(event) { event = event || window.event; console.log(11) console.log(event); } document.body.addEventListener('DOMMouseScroll', function(event) { console.log(222); console.log(event); });
上面代码可以看到,safari和chrome都使用 onmousewheel 事件监听,只有firefox使用 DOMMouseScroll 事件监听。
下面我们来看看 safari,chrome和firefox 浏览器各个属性差异性如下:
属性名: Firefox chrome safari
type DOMMouseScroll mousewheel mousewheel
formElement 没有该属性 null null
toElement 没有该属性 [object HTMLDivElement] [object HTMLDivElement]
wheelDelta 没有该属性 -120(向下滚动) -12(向下滚动)
srcElement 没有该属性 [object HTMLDivElement] [object HTMLDivElement]
screenX 353 406 872
screenY 278 284 281
clientX 353 406 629
clientY 140 164 219
offsetX 0 398 621
offsetY 0 200 211
layerX 353 406 629
layerY 140 208 219
pageX 353 406 629
pageY 140 208 219
which 1 0 1
detail 1 0 0
currentTarget null null null
target [object HTMLDivElement] [object HTMLDivElement] [object HTMLDivElement]
wheelDeltaY 没有该属性 -120 -12
wheelDeltaX 没有该属性 0 0
returnValue 没有该属性 true true
preventDefault 没有该属性 没有该属性 没有该属性
注意(目前测试使用的是Mac系统,window系统好久没有使用过了~)
如上的一些属性对比,可以看到,除了firefox以外,chrome上下滚动式使用 wheelDelta(向下滚动,该值为-120,向上滚动该值为120);safari上下滚动也使用 wheelDelta(向下滚动,该值为-12,向上滚动该值为12),对于firefox浏览器或 Opera浏览器而言,判断鼠标滚动方向的属性为 event.detail, 向下滚动为1,向上滚动为-1;
注意:safari滚动一圈的话(向下滚动值为-12,向上滚动值为12,但是如果滚动稍微快点的话,会多滚动几圈,那么该值即将变大,滚动几圈,那么就是 -12 * 几圈)。
1-2 兼容滚轮事件的方法
知道上面的一些差异后,我们现在可以封装一个兼容 safari,chrome和firefox的函数了;代码如下:
var addEvent = (function(window, undefined) { var _event = function(event) { var type = event.type; if (type === 'DOMMouseScroll' || type === 'mousewheel') { console.log(event) event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0); } if (event.srcElement && !event.target) { event.target = event.srcElement; } if (!event.preventDefault && event.returnValue !== undefined) { event.preventDefault = function() { event.returnValue = false; } } return event; }; if (window.addEventListener) { return function(el, type, fn, capture) { if (type === 'mousewheel' && document.mozFullScreen !== undefined) { type = "DOMMouseScroll"; } el.addEventListener(type, function(event) { fn.call(this, _event(event)); }, capture || false); } } else if (window.attachEvent) { return function(el, type, fn, capture) { el.attachEvent("on" + type, function(event) { event = event || window.event; fn.call(el, _event(event)); }); } } })(window);
测试使用方法如下:
addEvent(window, "mousewheel", function(event) { console.log(event.delta); if(event.delta < 0) { console.log('鼠标向下滚动了'); } });