鼠标滚轮移动的事件监听

原创 笑靥 随笔 js相关 190阅读 2018-09-19 10:55:12 举报

场景

在开发过程中,我们往往会遇到需要对鼠标滚动的事件进行监听的场景,使用插件实现又显得比较冗余,这个时候就想要自定义鼠标滚动的事件监听。
还有一种情况就是,在使用其他的js插件中,插件本身存在鼠标的监听和处理函数,但是这种处理跟我们期望的实现有所偏差,因此也就需要重写这个监听事件。

难点

鼠标滚轮事件的监听,难点在于浏览器的兼容性,因为浏览器所支持的事件不同,也就造成了监听的难度。
比如chrome浏览器是使用onmousewheel,Firefox(1.7之前的版本)使用DOMMouseScroll,还有新版本firefox替换使用的onwheel。
而且与滚轮相关的,上下滚动的表示也不同,比如Firefox支持detail,chrome支持wheelDelta,还有wheel事件使用的deltaX与deltaY的对比
事件的绑定方式也分为 addEventlistener和attachEvent(on)的方式

实现思路

  1. 首先确定浏览器所支持的事件类型
  2. 对DOM元素根据两种绑定方式绑定
  3. 进行事件处理,判断滚动方向

上述实现是考虑兼容低版本的浏览器,如果本身对浏览器的要求不高,可以只选用其中某种处理方式。

代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复