javascript中鼠标滚轮事件判断及应用的方法

发布时间:2022-04-25 15:55:34 作者:iii
来源:亿速云 阅读:415

本篇内容介绍了“javascript中鼠标滚轮事件判断及应用的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

       IE 6.0首先实现了 mousewheel 事件。此后,Opera、Chrome和 Safari也都实现了这个事件。当用 户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发 mousewheel 事件。这个事件可以在任何元素上面触发,终会冒泡到 document(IE8)或 window(IE9、Opera、 Chrome及 Safari)对象。与 mousewheel 事件对应的 event 对象除包含鼠标事件的所有标准信息外, 还包含一个特殊的 wheelDelta 属性。当用户向前滚动鼠标滚轮时,wheelDelta 是 120的倍数;当用 户向后滚动鼠标滚轮时,wheelDelta 是120的倍数。如图展示了这个属性。 

javascript中鼠标滚轮事件判断及应用的方法

       将 mousewheel 事件处理程序指定给页面中的任何元素或 document 对象,即可处理鼠标滚轮的 交互操作。来看下面的例子。 

EventUtil.addHandler(document, "mousewheel", function(event){ 
       event = EventUtil.getEvent(event);
        alert(event.wheelDelta); 
       }); 
       这个例子会在发生 mousewheel 事件时显示 wheelDelta 的值。多数情况下,只要知道鼠标滚轮 滚动的方向就够了,而这通过检测 wheelDelta 的正负号就可以确定。 有一点要注意:在 Opera 9.5之前的版本中,wheelDelta 值的正负号是颠倒的。如果你打算支持 早期的 Opera版本,就需要使用浏览器检测技术来确定实际的值,如下面的例子所示。 
EventUtil.addHandler(document, "mousewheel", function(event){
        event = EventUtil.getEvent(event);
        var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        alert(delta);
        }); 
完整代码如下,其中涉及到的client.js和EventUtil.js见页面下载地址:

<!DOCTYPE html>
<html>
<head>
       <title>MouseWheel Event Example</title>
       <script type="text/javascript" src="client.js"></script>
       <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
       <div id="myDiv">Try scrolling your mouse wheel (IE, Safari, and Opera).</div>
       <script type="text/javascript">
              EventUtil.addHandler(document, "mousewheel", function(event){
                     event = EventUtil.getEvent(event);
                     var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
                     alert(delta);
              });

       </script>
</body>
</html>

以上代码使用前面创建的 client 对象检测了浏览器是不是早期版本的 Opera。 
由于 mousewheel 事件非常流行,而且所有浏览器都支持它,所以 HTML 5也加 入了该事件。
       Firefox支持一个名为 DOMMouseScroll 的类似事件,也是在鼠标滚轮滚动时触发。与 mousewheel 事件一样,DOMMouseScroll 也被视为鼠标事件,因而包含与鼠标事件有关的所有属性。而有关鼠标滚 轮的信息则保存在 detail 属性中,当向前滚动鼠标滚轮时,这个属性的值是-3 的倍数,当向后滚动 鼠标滚轮时,这个属性的值是 3 的倍数。如图展示了这个属性。

javascript中鼠标滚轮事件判断及应用的方法

       可以将 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 和 DOMMouse- Scroll 事件了,例如:
        (function(){
function handleMouseWheel(event){
event = EventUtil.getEvent(event);
var delta = EventUtil.getWheelDelta(event);
alert(delta);
}

EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
        })();
       我们将相关代码放在了一个私有作用域中,从而不会让新定义的函数干扰全局作用域。这里定义的 handleMouseWheel()函数可以用作两个事件的处理程序(如果指定的事件不存在,则为该事件指定处 理程序的代码就会静默地失败)。由于使用了 EventUtil.getWheelDelta()方法,我们定义的这个事 件处理程序函数可以适用于任何一种情况。

“javascript中鼠标滚轮事件判断及应用的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. C#监视窗口的鼠标滚轮事件和键盘事件
  2. javascript的滚轮事件介绍

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:javascript中textInput事件如何应用

下一篇:javascript中怎么修改键Shift、Ctrl、Alt、Meta事件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》