JavaScript 滚轮事件使用说明
作者:bea
不过遗憾的是各浏览器都不尽相同。 一) 事件名称不相同 IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel"。而 Gecko(Firefox, Netscape) 对应的事件名称是 "DOMMouseScroll"。 二) 事件对象的属性不一样 有时我们需要知道用户是向上滚了还是向下滚了。例如我们有一个响应滚动事件的函数: 代码如下: function wheelHandle(e) { if(e.wheelDelt
不过遗憾的是各浏览器都不尽相同。
一) 事件名称不相同
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);
有用 | 无用
一) 事件名称不相同
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);
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JQuery+div+css 无限级联树实现代码
- Jquery替换已存在于element上的event的方法
- JQery jstree 大数据量问题解决方法
- 魔鬼字典 JavaScript 笔记 代码比较多乱
- Javascript Math ceil()、floor()、round()三个函数的区别
- js 无提示关闭浏览器页面的代码
- JS 无法通过W3C验证的处理方法
- extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
- javascript 简单抽屉效果的实现代码
- Javascript常考语句107条收集
- 风吟的小型JavaScirpt库 (FY.JS).
- 屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键
- 用jQuery实现的模拟下拉框代码
- Jquery实现无刷新DropDownList联动实现代码
- JavaScript this调用规则说明
- javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
- JavaScript中的闭包原理分析
- ExtJS GridPanel 根据条件改变字体颜色
- JavaScript通过attachEvent和detachEvent方法处理带参数的函数