addWheelListener.js /** * usage: * addWheelListener(elem, function(e) { * console.log(e.deltaY); * e.preventDefault(); * }); */(function (window, document) { let prefix = '', _addEventListener, onwheel, support; // 检测事件模型 if (wi
/**
* usage:
* addWheelListener(elem, function(e) {
* console.log(e.deltaY);
* e.preventDefault();
* });
*/
(function (window, document) {
let prefix = '', _addEventListener, onwheel, support;
// 检测事件模型
if (window.addEventListener) {
_addEventListener = 'addEventListener';
} else {
_addEventListener = 'attachEvent';
prefix = 'on';
}
// 检测wheel事件能否被支持
support = 'onwheel' in document.createElement('div') ? 'wheel' : // 各个厂商的高版本浏览器都支持"wheel"
document.onmousewheel !== undefined ? 'mousewheel' : // Webkit 和 IE一定支持"mousewheel"
'DOMMouseScroll'; // 低版本firefox
const addWheelListener = function (ele, callback, useCapture) {
_addWheelListener(ele, support, callback, useCapture);
// 旧版本Firefox使用MozMousePixelScroll
if (support === 'DOMMouseScroll') {
_addWheelListener(ele, 'MozMousePixelScroll', callback, useCapture);
}
};
function _addWheelListener (elem, eventName, callback, useCapture) {
elem[_addEventListener](prefix + eventName, support === 'wheel' ? callback : function (originalEvent) {
!originalEvent && ( originalEvent = window.event );
// 创建统一的事件对象
let event = {
originalEvent: originalEvent, // 保留对原事件对象的引用
target: originalEvent.target || originalEvent.srcElement,
type: 'wheel',
deltaMode: originalEvent.type === 'MozMousePixelScroll' ? 0 : 1,
deltaX: 0,
deltaZ: 0,
preventDefault: function () {
originalEvent.preventDefault ? originalEvent.preventDefault() : originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if (support === 'mousewheel') {
event.deltaY = -1 / 40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && ( event.deltaX = -1 / 40 * originalEvent.wheelDeltaX );
} else {
event.deltaY = originalEvent.detail;
}
// 将重写后的事件对象作为参数传递给回调函数并返回
return callback(event);
}, useCapture || false);
}
module.exports = {
addWheelListener: addWheelListener
};
})(window, document);
