记一次Mousewheel 滚轮事件

这两天写个关于鼠标滚轮的控制器，突然让Firefox给整无语了，居然还不一样（关键是我还不知道..）好吧，我out了，记一下长长记性...

其实大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中都提供了 "mousewheel" 事件。唯独 Firefox 却不支持此事件（行吧），不过庆幸 Firefox 3.5+ 提供了另外一个等同的事件："DOMMouseScroll"。

先使用原生js来监听一下：

// firefox
document.body.addEventListener("DOMMouseScroll", function(event) {
    var direction= event.detail && (event.detail > 0 ? "向下滚动" : "向上滚动");
    console.log(event);
	console.log(direction);
});
// chrome and ie ...
document.body.onmousewheel = function (event) {
    event = event || window.event;
    var direction = event.wheelDelta && (event.wheelDelta > 0 ? "向上滚动" : "向下滚动");
    console.log(event);
	console.log(direction);
};

根据上面代码查看console，safari和chrome浏览器都使用 onmousewheel 事件监听，只有firefox浏览器使用 DOMMouseScroll 事件监听。

如上的一些属性对比，可以看到，除了firefox以外，chrome上下滚动式使用 wheelDelta(向下滚动，该值为-120，向上滚动该值为120)；safari上下滚动也使用 wheelDelta(向下滚动，该值为-12，向上滚动该值为12)，对于firefox浏览器或 Opera浏览器而言，判断鼠标滚动方向的属性为 event.detail，向下滚动为1，向上滚动为-1;

注意：safari滚动一圈的话(向下滚动值为-12，向上滚动值为12，但是如果滚动稍微快点的话，会多滚动几圈，那么该值即将变大，滚动几圈，那么就是 -12 * 几圈)！

知道了一些差异后，就可以针对不同情况进行封装一个兼容的函数了：

var addEvent = (function(window, undefined) {
	var _event = function(event) {
		var type = event.type;
		if (type === 'DOMMouseScroll' || type === 'mousewheel') {
			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) {
	if (event.delta < 0) {
		console.log('鼠标向下滚动了！');
	}
	if (event.delta > 0) {
		console.log('鼠标向上滚动了！');
	}
});

---

其中部分内容来源于网络，侵删。