JS入门

鼠标滚轮(mousewheel)和DOMMouseScroll事件

字号+ 作者: 来源: 2014-11-16 22:15 我要评论( )

IE6.0首先实现了mousewheel事件。此后,Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向下还是向上),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE)或window(Opera、Chrome、及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息之外,还包含一个特殊的wheelDelta属性。当用于向前滚动鼠标滚轮是,wheelDelta是120的倍数;当用户向后滚动鼠标滚轮是,wheelDelta是-120的倍数。
将mousewheel事件处理程序指定给页面中的任何元素或document对象,即可以处理鼠标滚轮的交互操作。来看下面的例子

Event.addHnadler(document, "mousewheel", function (event) {
 event = EventUtil.getEvent(event);
 alert(event.wheelDelta);
});

这个例子会在发生mousewheel事件时显示wheelDelta的值。多数情况下,只要知道鼠标滚轮滚动的方向就够了,而这通过检测wheelDelta的正负号就可以确定。
在Opera9.5之前的版本中,wheelDelta的值的正负号是颠倒的。如果你打算支持早期的Opera版本,就需要使用浏览器检测技术来确定实际的值,如下面的例子所示:

EventUtil.addHandler(document, "mousewheel", function () {
 event = EventUtil.getEvent(event);
 var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
 alert(delta);
});

Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚动时触发。与mousewheel事件一样,DOMMouseScroll也被视为鼠标事件,因而包含与鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中,当向前滚动鼠标滚轮时,这个属性的值是-3的倍数,当向后滚动鼠标滚轮时,这个属性的值是3的倍数。

可以将DOMMouseScroll事件天骄到页面中的任何元素,而且该事件会冒泡的window对象。因此,可以像下面这样针对这个事件添加事件处理程序:

EventUtil.addHandler(window, "DOMMouseScroll", function (event) {
 event = EventUtil.getEvent(event);
 alert(event.detail);
})

这个简单的事件处理程序会在鼠标滚轮滚动时显示detail属性的值。
若要给出跨浏览器的解决方案,第一步就是创建一个能够取得鼠标滚轮增量值(delta)的方法。下面是我们添加到EventUtil对象中的这个方法:

var EventUtil = {
 getWheelDelta: function (event) {
 if (event.wheelDelta) {
 return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
 } else {
 return -event.detail * 40;
 }
 }
};

这里,getWheelDelta()方法首先检测了事件对象是否包含wheelDelta属性,如果是则通过浏览器检测代码确定正确的值。如果wheelDelta不存在,则假设相应的值保存在detail属性中。由于Firefox的值有所不同,因此首先要将这个值的符号反向,然后再乘以40,就可以保证与其它浏览器的值相同了。有这个方法之后,就可以将相同的事件处理程序指定给mousewheel和DOMMouseScroll事件了,例如:

function handleMouseWheel(event) {
 event = EventUtil.getEvent(event);
 var delta = EventUtil.getWheelDelta(even);
 alert(delta);
}
EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
EventUtil.addHandler(document, "mousewheel", handleMouseWheel);

下面是跨浏览器环境下的解决方案:

var client = function () {
 var engine = {
 //呈现引擎
 ie: 0,
 gecko: 0,
 webkit: 0,
 khtml: 0,
 opera: 0,
 //具体版本号
 ver: null
 };
 var browser = {
 //浏览器
 ie: 0,
 firefox: 0,
 konq: 0,
 opera: 0,
 chrome: 0,
 safari: 0,
 //具体版本号
 ver: null
 };
 var system = {
 win: false,
 mac: false,
 x11: false
 };
 //在此检测呈现引擎、平台设备
 return {
 engine: engine,
 browser: browser,
 system: system
 };
 }();
var EventUtil = {
 getEvent: function (event) {
 return event ? event : window.event;
 },
 addHandler: function (element, type, handler) {
 if (element.addEventListener) {
 element.addEventListener(type, handler, false);
 } else if (element.attachEvent) {
 element.attachEvent("on" + type, handler);
 } else {
 element["on" + type] = handler;
 }
 },
 getWheelDelta: function (event) {
 if (event.wheelDelta) {
 return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
 } else {
 return -event.detail * 40;
 }
 }
};

function handleMouseWheel(event) {
 event = EventUtil.getEvent(event);
 var delta = EventUtil.getWheelDelta(event);
 alert(delta);
}
EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);

在iPhone和iPodTouch中,如果两个手指同时放在屏幕上,而且页面因手指移动而滚动,也会触发mousewheel事件。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用javascript生成的植物显示过程特效

    使用javascript生成的植物显示过程特效

    2015-06-06 16:26

  • javascript 杂谈之哪种写法你更喜欢?

    javascript 杂谈之哪种写法你更喜欢?

    2014-11-16 22:15

  • 面向对象的JavaScript

    面向对象的JavaScript

    2014-11-16 22:15

  • Javascript模板引擎性能对比及几点优化

    Javascript模板引擎性能对比及几点优化

    2014-11-16 22:15

网友点评