自从12月20日考完六级(丢人),又和闺蜜过了两天圣诞,中间还投了几份简历,学了学jquery权威指南,期望年前可以在北京找到一份工作。
今天周五啦,知道今天写的笔记,周六日肯定又会沉啦。
没关系,笔记是写给自己看的,毛病是让他人挑的,好几次我看到自己的笔记里有错别字,大家都不出来指正,考虑要不要换个地方写,可是都积累这么多笔记换个地方,还得转移阵地,怪麻烦的,继续写吧!
- 鼠标滚轮事件,最早是IE6实现的,后来Opera、Chrome、Safari也都实现了这个事件。但是在opera9.5之前的版本与通用事件有些设置有出入。Firefox支持的滚轮事件与通用事件的名字及属性的设置也不一样。
所以、要给出一个跨浏览器的解决方案。 - 方案
-
我们希望浏览器可以都这么实现
事件名称:mousewheel
;
滚轮信息:event.wheelDelta
;
EventUtil.addHandler(document,"mousewheel",function(event){
event=EventUtil.getEvent(event);
alert(event.wheelDelta);//上滑120,下滑-120
}); -
opera早期版本正负号颠倒,所以需要这样
wheelDelta
值的正负号是颠倒的,需要在代码中,判断浏览器版本,来做相应的处理。
书上是这样写的,但是由于我还没有仔细学习浏览器对象,所以对浏览器版本的区分还是不大熟悉。也没找出测试不通过的理由。
EventUtil.addHandler(document,"mousewheel",function(event){
event=EventUtil.getEvent(event);
var delta=(client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta:event.wheelDelta);
alert(delta);
}); -
Firefox
他支持的鼠标滚轮事件名字是DOMMouseScrool
;事件信息是:event.detail
。
EventUtil.addHandler(document,"DOMMouseScroll",function(event){
event=EventUtil.getEvent(event);
alert(event.detail);//上滑-3,下滑3
}); - 跨浏览器的综合解决方案
- 继续为EventUtil添加方法
getWheelDelta:function(event){
if(event.wheelData){
return (client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta:event.wheelDelta);
}else{
return -event.detail*40;
}
} - 调用
function handler(event){
event=EventUtil.getEvent(event);
var delta=EventUtil.getWheelDelta(event);
alert(delta)
}
EventUtil.addHandler(document,"mousewheel",handler);
EventUtil.add(document,"DOMMouseScroll",handler);
这是书上给的解决方案,但是我在测试时,为了兼容欧朋早期版本所写的代码,依旧不起效果,等我仔细学了浏览器对象,再想办法解决,现在欧朋的版本已经到26+,所以也可以忽略这一兼容问题。 - 这个事件是冒泡事件除了IE8会冒泡到document,其他浏览器都会冒泡到window