Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

JavaScript 鼠标滚轮事件

  平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给力。而是因为火狐给力过头了,完全不顾其它浏览器的感受标新立异了。除了火狐之外,所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应。但是火狐却偏偏不支持MouseWheel,而使用无厘头的DOMMouseScroll,这玩意儿除了火狐以外其它浏览器都不兼容。也就是说,对于鼠标滚轮事件的处理,火狐只能使用DOMMouseScroll。而非火狐则只能使用MouseWheel。这两种事件实现的原理不同,他们处理的数据也不同。MouseWheel的事件参数中包含了wheelDelta属性,这个属性的意思是事件被触发以后,滚动条应该滚动的距离,单位是像素。这个从属性名称就可以看出,Delta这个词通常是用来描述增量的,你可以简单的理解为滚动条的滚动增量。在火狐的DOMMouseScroll中不使用这个,而是使用detail来获取滚动的距离,而且更奇葩的是它的单位不是像素,是行。这个行不是我们平时用的line-height的行,我们也没必要管那么多。因为我们使用鼠标滚轮事件的时候想要的不是行也不是像素,而是用户对滚轮滚动的格数。windows中的默认设置是,滚轮滚动一格等于3行,而每个行是40像素。我们可以在控制面板的鼠标设置中修改它。

  虽然这些参数是可以被修改的,但是不用担心。因为除了火狐以外,事件中使用的是参数的默认值,即使修改了移动的行数,事件中得到的数据也不会因此改变。火狐这奇葩的东西目前我还没想到什么办法整治它,但是我觉得应该不会有人手贱到去修改系统的这个属性。所以我决定暂时无视这万中无一的奇葩用户。如果以后有特殊需求,我会另外写一篇文章来解决这个问题。下面是实现这个效果的完整代码
<!DOCTYPE html>
<style>
span {font:14px/20px 微软雅黑;}
#counter {
  width:50px;height:20px;
  border:1px solid #CCC;
  background:#F9F9F9;
  font:14px/20px Consolas;
  text-align:center;
  margin:10px;
}
</style>
<span>使用鼠标滚轮调整数值大小</span><br/>
<div id="counter">0</div>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:undefined;
var isFF=/FireFox/i.test(navigator.userAgent);
//获取元素
var counter=document.getElementById("counter");
//鼠标滚轮事件
if(isIE<9) //传统浏览器使用MouseWheel事件
  counter.attachEvent("onmousewheel",function(){
    //计算鼠标滚轮滚动的距离
    //一格3行,每行40像素,所以除以120
    var v=event.wheelDelta/120;
    counter.innerHTML=counter.innerHTML*1+v;
    //阻止浏览器默认方法
    return false;
  });
else if(!isFF) //除火狐外的现代浏览器也使用MouseWheel事件
  counter.addEventListener("mousewheel",function(e){
    //计算鼠标滚轮滚动的距离
    var v=e.wheelDelta/120;
    counter.innerHTML=counter.innerHTML*1+v;
    //阻止浏览器默认方法
    e.preventDefault();
  },false);
else //奇葩的火狐使用DOMMouseScroll事件
  counter.addEventListener("DOMMouseScroll",function(e){
    //计算鼠标滚轮滚动的距离
    //一格是3行,但是要注意,这里和像素不同的是它是负值
    var v=-e.detail/3;
    counter.innerHTML=counter.innerHTML*1+v;
    //阻止浏览器默认方法
    e.preventDefault();
  },false);
</script>
  这样,滚轮事件就可以使用了。这里值得注意的是最有一步的组织浏览器默认方法的动作,如果少了它这个滚动事件就会被整个文档截获,当你滚动滚轮的时候整个文档都会被你滚动。在低版本IE中就不用preventDefault了,直接return false就可以了。
  暂时先说到这儿吧,其实我对这个事件也不是非常了解,因为这玩意儿用的不多。明天我们继续研究它,来说说滚动条的制作。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^