[JS] - onmusewheel事件(兼容IE,FF)
2010-10-30 21:30
393 查看
来源:http://www.denisdeng.com/?p=685
相信用户在浏览Google Map 时,都注意到向上或向下滚动鼠标可以使地图放大或缩小。其实,对于鼠标滚动我们并不陌生。但要给一个元素绑定鼠标滚动事件,我们有必要对该事件有一个详尽的了解。
浏览器对该事件支持情况如何?IE6, Opera9+, Safari2+以及Firefox1+均支持“onmousewheel”事件,在FF 3.x中,与之相当的是“DOMMouseScroll”事件。“onmousewheel”作为事件名,不为其识别。所以,为了保证能在每个浏览器中都能运行,就需要针对不同的浏览器来绑定不同的事件。
上面的代码给document绑定了mousewheel事件,并能在所有浏览器中运行。但是,鼠标每向上或向下移动一次,滚动了多少?当该事件触发时,在non-FF浏览器中,记录其距离的是“wheelDelta”,它返回的总是120的倍数(120表明mouse向上滚动,-120表明鼠标向下滚动)。在FF中,记录其滚动距离的是“detail”属性,它返回的是3的倍数(3表明mouse向下滚动,-3表明mouse向上滚动)。
需要注意的是,Opera 响应“onmousewheel”事件时,它同时拥有“wheelDelta”和“detail”属性。其“detail”属性返回的值与FF中相同。因此,对Opera 应该用“detail”属性来mouse滚动的距离。在触发滚动事件时,我希望得到整数1或-1。通过上面的分析,我们可以很轻松的得到我们想要的值,对于“wheelDelta”,只需要除以120,对于“detail”,将其除以3即可。
有了上面的分析,我们可以构建自己的函数为一个对象绑定mousewheel事件。即:
在我写这篇文章时,jQuery已经开发了jquery.mousewheel插件。使用该插件无需过多的代码就可以很方便的为一个对象绑定mousewheel事件。
查看demo
相关资料
The onmousewheel event of JavaScript
onmousewheel Event
Mouse wheel programming in JavaScript
相信用户在浏览Google Map 时,都注意到向上或向下滚动鼠标可以使地图放大或缩小。其实,对于鼠标滚动我们并不陌生。但要给一个元素绑定鼠标滚动事件,我们有必要对该事件有一个详尽的了解。
浏览器对该事件支持情况如何?IE6, Opera9+, Safari2+以及Firefox1+均支持“onmousewheel”事件,在FF 3.x中,与之相当的是“DOMMouseScroll”事件。“onmousewheel”作为事件名,不为其识别。所以,为了保证能在每个浏览器中都能运行,就需要针对不同的浏览器来绑定不同的事件。
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x if (document.attachEvent) //if IE (and Opera depending on user setting) document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')}) else if (document.addEventListener) //WC3 browsers document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)
上面的代码给document绑定了mousewheel事件,并能在所有浏览器中运行。但是,鼠标每向上或向下移动一次,滚动了多少?当该事件触发时,在non-FF浏览器中,记录其距离的是“wheelDelta”,它返回的总是120的倍数(120表明mouse向上滚动,-120表明鼠标向下滚动)。在FF中,记录其滚动距离的是“detail”属性,它返回的是3的倍数(3表明mouse向下滚动,-3表明mouse向上滚动)。
需要注意的是,Opera 响应“onmousewheel”事件时,它同时拥有“wheelDelta”和“detail”属性。其“detail”属性返回的值与FF中相同。因此,对Opera 应该用“detail”属性来mouse滚动的距离。在触发滚动事件时,我希望得到整数1或-1。通过上面的分析,我们可以很轻松的得到我们想要的值,对于“wheelDelta”,只需要除以120,对于“detail”,将其除以3即可。
function displayDelta(e){ var evt = window.event || e; var delta = evt.detail ? -evt.detail / 3 : evt.wheelDelta / 120; return delta ; }
有了上面的分析,我们可以构建自己的函数为一个对象绑定mousewheel事件。即:
function wheel(obj, fn ,useCapture){ var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x if (obj.attachEvent) //if IE (and Opera depending on user setting) obj.attachEvent("on"+mousewheelevt, handler, useCapture); else if (obj.addEventListener) //WC3 browsers obj.addEventListener(mousewheelevt, handler, useCapture); function handler(event) { var delta = 0; var event = window.event || event ; var delta = event.detail ? -event.detail/3 : event.wheelDelta/120; if (event.preventDefault) event.preventDefault(); event.returnValue = false; return fn.apply(obj, [event, delta]); } }
在我写这篇文章时,jQuery已经开发了jquery.mousewheel插件。使用该插件无需过多的代码就可以很方便的为一个对象绑定mousewheel事件。
查看demo
相关资料
The onmousewheel event of JavaScript
onmousewheel Event
Mouse wheel programming in JavaScript
相关文章推荐
- [JS] - onmusewheel事件(兼容IE,FF,opera,safari,chrome)
- [JS] - onmusewheel事件(兼容IE,FF)
- onmusewheel事件(兼容IE,FF,opera,safari,chrome)
- onmusewheel事件(兼容IE,FF,opera,safari,chrome)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- JS获取键盘事件 兼容FF,IE
- ie ff兼容 div 失去焦点(以此原理,可以为任何没有onblur/onfocuse的元素添加类似的事件动作)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 开发日志:js当文本框输入非中文字符时,提示只能输入中文并将非中文字符清空【兼容IE、FF,适用于当文本框内容改变就立刻触发事件的其他功能性需求】
- js radio checkbox onchange事件在IE与FF的处理
- js追加事件FF IE兼容
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 原生js绑定和解绑事件,兼容IE,FF,chrome
- js追加事件FF IE兼容
- 终于成功的做到了兼容IE、FF、google的回车键触发事件(js源代码)