JavaScript 滚轮事件使用说明
2010-03-07 00:00
627 查看
不过遗憾的是各浏览器都不尽相同。
一) 事件名称不相同
IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel"。而 Gecko(Firefox, Netscape) 对应的事件名称是 "DOMMouseScroll"。
二) 事件对象的属性不一样
有时我们需要知道用户是向上滚了还是向下滚了。例如我们有一个响应滚动事件的函数:
IE, KHTML 支持 e.wheelDelta ,大于 0 为向上滚动,小于 0 为向下滚动。Gecko 支持 e.detail,小于 0 为向上滚动,大于 0 为向上滚动,跟前面的相反。而 Opera 比较牛,两种都支持。
下面给出一个注册滚轮事件的函数做参考:
注册一个监听事件:
一) 事件名称不相同
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 滚轮事件使用说明
- JavaScript焦点事件、鼠标事件和滚轮事件使用详解
- JavaScript 事件记录使用说明
- JavaScript 事件记录使用说明
- JavaScript焦点事件、鼠标事件和滚轮事件使用详解
- javascript中Array对象的join()方法使用说明
- javascript滚轮事件基础实例讲解(37)
- JavaScript基础 a标记 使用onclick事件阻止默认跳转 onclick事件 与 跳转 ,onclick事件优先执行。
- javascript实现禁止鼠标滚轮事件
- 关于JavaScript中监听鼠标滚轮事件
- JSON 和 JavaScript eval使用说明
- JavaScript:prototype属性使用说明
- javascript中的prototype属性使用说明(函数功能扩展)
- JavaScript:prototype属性使用说明
- JavaScript中的事件使用方式解说
- JavaScript:prototype属性使用说明
- javascript控制鼠标滚轮事件
- javascript之AJAX框架使用说明
- Javascript 的面向事件的设计中,使用对象指针实例