本来是想做一个兼容火狐和谷歌浏览器的基于滚轮事件的轮播,然后遇到了点问题,特意记录一下:
首先click事件的事件对象有个detail属性,这是用来记录给定位置发生了多少次单价的,在同一个元素上相继发生一次mousedown和mouseup事件做为一次单价,简单来说发生一点击值就为1,两次为2。
但是对于火狐浏览器中,DOMMouseScroll事件的事件对象里,detail属性是用来记录滚轮的,往上为-3的倍数,往下为3的倍数。.
而谷歌是不支持DOMMouseScroll事件,它支持mousewheel事件,并且记录滚轮的属性是wheelDelta,上为120的倍速,下为-120的倍数
我想实现的是,点击对应按钮可以自然的滑动过去,也可以通过滚轮来实现滚动,但是在做浏览器兼容以及判断detail上出现了卡壳。
问题就在于,火狐浏览器对于两个事件中detail属性的不同处理。
附上一个很巧妙的处理方式:
if (e.wheelDelta) {
Delta = e.wheelDelta / 120;
} else if (e.detail) {
Delta = -e.detail / 3;
}
如果传入的e是点击事件的e,那么Delta都是-0.33333333,且火狐谷歌都是这个值
如果传入的e是滚轮事件的e,那么对于火狐谷歌来说Delta值为正负1