JS滚轮事件(mousewheel/DOMMouseScroll)了解

一、学无止境、温故知新

getBoundingClientRect

g

b

c

r

dispatchEvent

createEvent

init*Event

dispatchEvent

mousewheel

二、兼容差异大全

onmousewheel

DOMMouseScroll

onmousewheel

body

div

document.body.onmousewheel = function(event) {
event = event || window.event;
console.dir(event);
};

document.body.addEventListener("DOMMouseScroll", function(event) {
console.dir(event);
});

event.type

event.screenX/event.screenY

event.clientX/event.clientY

event.altKey

event.shiftKey

event.cancelBubble

event.srcElement

event.target

event.wheelDelta

event.wheelDelta

-120

-360

event.detail

3

三、兼容的滚轮事件方法

addEvent.js

/**
* 简易的事件添加方法
*/

define(function(require, exports, module) {
exports.addEvent = (function(window, undefined) {
var _eventCompat = function(event) {
var type = event.type;
if (type == 'DOMMouseScroll' || type == 'mousewheel') {
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
}
//alert(event.delta);
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.mozHidden !== undefined) {
type = "DOMMouseScroll";
}
el.addEventListener(type, function(event) {
fn.call(this, _eventCompat(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, _eventCompat(event));
});
}
}
return function() {};
})(window);
});

mousewheel

addEvent(dom, "mousewheel", function(event) {
if (event.delta < 0) { alert("鼠标向上滚了！"); }
});

四、简单的实例、上面方法验证

exports

addEvent

slide.js

/**
* 简易的列表左右滑动切换效果
* 鼠标事件是关键，因此，一些数值写死在方法中，纯测试用
*/

define(function(require, exports, module) {
var Event = require("/study/201304/addEvent.js");
var _move = function(ele, to, from) {
// 动画实现
// ...
};
return {
index: 0,
visible: 4,
init: function(box) {
// box指滚动的列表容器
var self = this
, length = box.getElementsByTagName("li").length;
Event.addEvent(box.parentNode, "mousewheel", function(event) {
if (event.delta > 0 && self.index > 0) {
// 往上滚
self.index--;
} else if (event.delta < 0 && self.index < length - self.visible) {
// 往下
self.index++;
} else {
return;
}
_move(box, -1 * self.index * 140);

event.preventDefault();
});
}
};
});

seajs

var $ = function(id) {
return document.getElementById(id);
};
seajs.use("/study/201304/slide.js", function(slide) {
slide.init($("slideBox"));
});

五、首尾呼应的结语

event.wheelDelta

event.detail

wheelDelta