Mousewheel 事件

最新推荐文章于 2024-01-27 13:05:37 发布

jyb123

最新推荐文章于 2024-01-27 13:05:37 发布

阅读量653

点赞数

大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件，不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件：”DOMMouseScroll” 。

“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。
“DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。
“mousewheel” 事件在 Opera 10+ 中却是个特例，既有 “event.wheelDelta” 属性，也有 “event.detail” 属性。

注：上面第三点，在《The onmousewheel event of JavaScript》一文中有这样一段批注：

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE’s.

但经测试， Opera 9+ 和 Opera 10+ 中的 event.wheelDelta 属性与其他浏览器中的表现完全一致，未发现异常与错误，从接口角度来说，代码中应优先使用 “event.wheelDelta” 属性。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>
<div id="apDiv1">
<div id="apDiv2">asdads</div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var Browser = function(){
   var d_ = document,n_ = navigator,t_ = this,s_= screen;

    var b = n_.appName;
    var ua = n_.userAgent.toLowerCase();

   t_.name = "Unknow";

   t_.safari = ua.indexOf("safari")>-1; // always check for safari & opera
    t_.opera = ua.indexOf("opera")>-1;    // before ns or ie
   t_.firefox = !t_.safari && ua.indexOf('firefox')>-1; // check for gecko engine
    t_.ns = !t_.firefox && !t_.opera && !t_.safari && (b=="Netscape");
    t_.ie = !t_.opera && (b=="Microsoft Internet Explorer");

   t_.name = (t_.ie ? "IE" : (t_.firefox ? "Firefox" : (t_.ns ? "Netscape" : (t_.opera ? "Opera" : (t_.safari ? "Safari" : "Unknow")))));
}

var brw = new Browser();

var apDiv1 = document.getElementById("apDiv1");
var perWidth = apDiv1.clientWidth / 2;

var mouse_wheel = function(e){
   var evt = window.event || e;
   if(evt.detail > 0 || evt.wheelDelta < 0)
       apDiv1.scrollLeft += 120;
   else
       apDiv1.scrollLeft -= 120;
}

var mouse_wheel_opera = function(e){
   //alert(window.event == e); //Opera 下，window.event 和 e 相等
   var obj = e.srcElement;
   if(obj == apDiv1){
       mouse_wheel(e);
   }
}

switch(brw.name){
   case "IE":
   case "Safari":
       apDiv1.onmousewheel = mouse_wheel;
       break;
   case "Firefox":
       apDiv1.addEventListener("DOMMouseScroll", mouse_wheel, false);
       break;
   case "Opera":
       document.onmousewheel = mouse_wheel_opera;
       break;
}
</script>

jyb123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mousewheel 事件

大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件，不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件：”DOMMouseScroll” 。“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是
复制链接

扫一扫