滚轮事件
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实现显隐效果了。
加油!