js中滚轮事件
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js中滚轮事件
2009-11-20 13:20
用过 Google 地图的人可能都很熟悉，通过滚动滚轮可以对地图进行缩放，非常地方便。适当地使用滚轮事件可以带来不错的用户体验。
不过遗憾的是各浏览器都不尽相同。
一) 事件名称不相同
IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel"。而 Gecko(Firefox, Netscape) 对应的事件名称是 "DOMMouseScroll"。
二) 事件对象的属性不一样
有时我们需要知道用户是向上滚了还是向下滚了。例如我们有一个响应滚动事件的函数: function wheelHandle(e) {
if(e.wheelDelta) {// IE, KHTML, Opera
alert(e.wheelDelta > 0 ? '向上滚' : '向下滚');
} else { // Gecko
alert(e.detail < 0 ? '向上滚' : '向下滚');
}
}IE, KHTML 支持 e.wheelDelta ,大于 0 为向上滚动，小于 0 为向下滚动。Gecko 支持e.detail，小于 0 为向上滚动，大于 0 为向上滚动，跟前面的相反。而 Opera 比较牛，两种都支持。
下面给出一个注册滚轮事件的函数做参考：
/**
* 注册滚轮事件函数
* @param element : 注册的事件对象
* @param wheelHandle : 注册事件函数
*/
function addScrollListener(element, wheelHandle) {
if(typeof element != 'object') return;
if(typeof wheelHandle != 'function') return;
// 监测浏览器
if(typeof arguments.callee.browser == 'undefined') {
var user = erAgent;
var b = {};
b.opera = user.indexOf("Opera") > -1 && typeof window.opera
== "object";
b.khtml = (user.indexOf("KHTML") > -1 ||
user.indexOf("AppleWebKit") > -1 ||
user.indexOf("Konqueror") > -1) && !b.opera;
b.ie = user.indexOf("MSIE") > -1 && !b.opera;
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml; arguments.callee.browser = b;
}
if(element == window)
element = document;
if(arguments.callee.browser.ie)
element.attachEvent('onmousewheel', wheelHandle);
else
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false);
}
注册一个监听事件：
var display = document.getElementById('display');
function wheelHandle(e) {
if(e.wheelDelta) {// IE, KHTML, Opera
display.innerHTML = (e.wheelDelta > 0 ? '上' : '下');
} else { // Gecko
display.innerHTML = (e.detail < 0 ? '上' : '下');
}
}
addScrollListener(window, wheelHandle);