JavaScript 滚轮事件使用说明
JavaScript 滚轮事件使用说明
发布时间:2016-12-30 来源:查字典编辑
摘要:不过遗憾的是各浏览器都不尽相同。一)事件名称不相同IE,KHTML(Safari,Chrome),Opera对应的事件名称是"mousewh...

不过遗憾的是各浏览器都不尽相同。

一) 事件名称不相同

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 = navigator.userAgent;

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);

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类