你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

FiveFox对于click事件和DOMMouseScroll事件中detail属性【2021.12.8】

2021/12/12 11:14:06

本来是想做一个兼容火狐和谷歌浏览器的基于滚轮事件的轮播,然后遇到了点问题,特意记录一下:

首先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