JavaScript 滚轮事件使用说明


Posted in Javascript onMarch 07, 2010

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

一) 事件名称不相同
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 相关文章推荐
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 #Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 #Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 #Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 #Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 #Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 #Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 #Javascript
You might like
PHP网站基础优化方法小结
2008/09/29 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python实现字典的key和values的交换
2015/08/04 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
Python字典实现伪切片功能
2020/10/28 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
成龙洗发水广告词
2014/03/14 职场文书
学校校庆演讲稿
2014/05/22 职场文书
运动会演讲稿50字
2014/08/25 职场文书
小学班主任自我评价
2015/03/11 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL