首页 > 代码库 > 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

滚轮事件

jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下。

mousewheel事件只有火狐浏览器不支持。mousewheel用于取得滚动距离的属性名为event.wheelDelta,往上滚一圈是120,往下滚一圈是-120.在IE6-8下,window无法绑定mousewheel事件,Opera,Safari,Chrome可以。

火狐下使用DOMMouseScroll来代替mousewheel事件。用于取得滚动距离的属性名为event.detail。往上滚一圈是-3,往下滚一圈是3.当我们按住ctrl,alt,shift键,再滚动鼠标滚轮时,detail的值就会变成-1和1.而且在按住ctrl键时,滑动滚轮还有缩放页面的功能,我们可以通过event.axis == event.HORIZONTAL_AXIS或event.axis == event.VERTICAL_AXIS得知是水平滚动还是垂直滚动。

兼容方案如下:

var wheel = function(obj,callback){

  var wheelType = "mousewheel";

  try{

    document.createEvent("MouseScrollEvents");   //创建DOMMouseScroll事件,如果是火狐就会执行,不是火狐,就报错

    wheelType = "DOMMouseScroll";

  }catch(){}

  addEvent(obj,wheelType,function(event){    //给对象obj绑定鼠标滚动事件

    if("wheelDelta" in event){   //统一为120,其中正数为向上滚动,负数代表往下滚动

      var delta = event.wheelDelta;

      if(window.opera && opera.version()<10){  //opera9系列的方向跟上面的相反

        delta = -delta

      }

      event.delta = Math.round(delta) / 120; //早期的safari会出现浮点数。为什么不赋值给wheelDelta,因为事件对象的原始属性是只读的,因此我们只能添加一个自定义属性delta来解决兼容性问题

    }

    else if("detail" in event){  //如果是火狐

      event.wheelDelta = -event.detail * 40;  //修复事件的wheelDelta属性,这样,火狐浏览器的这个属性就跟标准一样了

      event.delta = event.wheelDelta / 120;   //添加自定义属性delta解决兼容性问题

    }

    callback.call(obj,event);//这里的event.delta属性值是所有浏览器兼容的,往上一圈为1,往下一圈为-1.而event.wheelDelta属性在opera9系列和早期的safari中仍然存在问题,在其他浏览器下是正常的,往上一圈是120,往下一圈是-120.

  })

}

滚轮事件触发页面的加载是电商领域必须知道的技术点,面试前一定要去了解一下整个流程。

mouseenter与mouseleave事件

在前端开发中,我们经常遇到隐藏弹出层或下拉菜单的需要。这就是所谓的显隐效果。我们经常使用mouseenter和mouseleave来实现。为什么不用mouseover和mouseout来实现呢,我来说一下这个问题:假设弹出层里面有无数子孙元素,我们的mouseout只监听弹出层最外面的大容器,我们很容易就移出这个大容器(鼠标移动到大容器的子元素,对于mouseout来说也算移出),但是实际上在鼠标还是在大容器范围内,会让判断失效。但mouseleave就不会,只有鼠标跑到大容器的外面才会触发,这是因为mouseenter和mouseleave不会冒泡。

但是webkit浏览器下不支持mouseenter和mouseleave事件。如何在不支持这两个事件的浏览器中模拟它们:

jQuery.each(

  {  

    mouseenter:"mouseover",

    mouseleave:"mouseout"

  },

  function(orig, fix){   //orig是mouseenter,fix是mouseover

    jQuery.event.special[orig] = {    //把mouseenter事件当做特殊事件处理

      delegateType:fix,   //用mouseover伪装mouseenter

      bindType: fix,

      handle:function(event){   //这时的event已经被修复了

        var ret,target = this,handleObj = event.handleObj, related = event.relatedTarget;//对mouseover事件而言,事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素。类似地,对mouseout事件而言,事件的主目标是失去光标的元素,而相关元素则是获得光标的元素。IE下不支持这个属性,这个relatedTarget属性是在修复event时修复的,在IE下,它的值在mouseover时,等于fromElement(假设从div1移动到目标元素div2,那么这时的fromElement是div1),在mouseout时,等于toElement(假设从目标元素div2移出来到div1中,那么这时的toElement是div1)。

        if(!related || (related ! == target && !jQuery.contains(target,related))){ //这时related=div1,target = div2,并且div2不包含div1,就是if语句执行回调方法,模拟mouseenter,mouseleave。如果是在div2中移动,比如移动到div2的子元素div3中,这时会触发div2的mouseout事件,这时target就是div2,relatedTarget就是div3,但是target包含related,所以不会进入if语句,解决了mouseover显隐时的问题。同时也会触发div3的mouseover事件,然后冒泡到div2,这时target就是div2,relatedTarget也是div2,所以也不会进入if语句。

          event.type = handleObj.origType;   //事件的原始类型,也就是mouseenter

          ret = handleObj.handler.apply(this,arguments);  //执行回调方法

          event.type = fix;   //事件的修复类型,也就是mouseover

        }

        return ret;

      }

    }

  }

)

related也有不存在的情况下,比如,从窗口外面直接进入到div2. 这样就能在所有浏览器下通过mouseenter和mouseleave实现显隐效果了。

 

 

加油!

 

第二十七课:滚轮事件,mouseenter与mouseleave事件的修复