js下的鼠标滚动事件

我们在日常使用中会经常使事件用到鼠标滚轮,但是当我们想自定义鼠标滚轮事件时就会遇到一些麻烦--滚轮事件的兼容性有些独特。我们来看一下。

   /*
    *    滚轮事件
    *   onmousewheel
    *       兼容chrome和IE 不兼容火狐
    *    e.wheelDelta;
    *       记录滚动事件的方向
    *       负值是往后拉
    *       正值就是往前推
    *       为120的倍数
    **/
obj.onmousewheel =function (e) {
       //...
}
   /*
    *    滚轮事件
    *   DOMMouseScroll
    *       只支持火狐
    *    e.detail;
    *       记录滚动事件的方向
    *       正值是往后拉
    *       负值就是往前推
    *       为3的倍数
    **/
obj.DOMMouseScroll=function (e) {
       //...
}

这是我们在使用时就要注意这两种方法的差别,主要是滚动事件的方向记录。

  1. 前滚后滚记录的正负值不同
  2. 每次滚动记录的值得大小不同

所谓我们写兼容的时候要考虑这个问题
兼容写法:

function mousewheel(obj,fn) {
    function eFn(e) {
        e = e || window.event;
        if(fn.call(this,e,-e.wheelDelta/120||e.detail/3)===false)!-[1,]?e.returnValue=false:e.preventDefault();
}
    var eName = document.onmousewheel===null?"mousewheel":"DOMMouseScroll";
    document.addEventListener?obj.addEventListener(eName,eFn):obj.attachEvent("on"+eName,eFn)
   }
//添加事件
function addEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //判断支不支持attacgevent方法,如果支持就是ie678
        obj.attachEvent("on"+eName,eFn) //兼容IE678
    }else{
        obj.addEventListener(eName,eFn)//兼容标准浏览器
    }
 }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 事件流 IE和Netscape开发团队提出了完全相反的两种事件流的概念,事件冒泡流和事件捕获流。 事件冒泡 事件由...
    exialym阅读 992评论 0 9
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,523评论 25 708
  • 13.1 事件流 “DOM2级事件”规定事件流包括3个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。事件捕获表示...
    Elevens_regret阅读 453评论 0 0
  • 李大玖阅读 224评论 2 1
  • 一直喜欢一句诗:有约不来过夜半,闲敲棋子落灯花。 有道是“最难风雨故人来”,朋友的失约让诗人略显沮丧,但这随即便被...
    紫健阅读 3,932评论 21 124