vue中引入mousewheel事件及兼容性处理方式的示例分析


小编给大家分享一下vue中引入mousewheel事件及兼容性处理方式的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮(mousewheel)事件,方便查看数据;其实现原理与我上一篇博客中的拖动事件类似,利用模拟出来的同一个滚动条来实现1、滚动条与滚动槽的高度比例 应该等于 内容区(动态变化)和可视区的高度比例;滚动槽与可视区平齐,高度一样;滚动条的高度则根据内容的高度等比例计算;2、各元素的定位采用绝对定位,其父元素采用相对定位,这样就能很好地设置样式;布局与样式做好后,只需要在组件methods注册方法,在元素就位后调用该方法,在方法内部为表格绑定(mousewheel)事件;在这里需要考虑兼容性问题,firefox并不支持mousewheel事件,它对应的鼠标滚动事件为DOMMouseScroll事件,并且该事件仅能通过DOM2级(addEventListener)添加处理程序;并且判断鼠标滚动方向的方式也不一样,firefoxt通过detail属性判断,向前滚动该属性为-3,向后+3;其余浏览器通过wheelDelta属性,向前时为+120的倍数,向后为-120的倍数;具体内容可参考《js高级程序设计》事件一章;添加函数如下:该函数在给firefox绑定的事件解绑时遇到了问题,由于removeEventListener()需要通过句柄来解绑,而addEventListener()通过句柄添加处理函数会导致event参数无法传递的问题;即使在需要解绑时给document绑定空的处理函数也无法覆盖前一个绑定函数;最后只好添加一个标志,在需要解绑函数时改变标志的值;在绑定函数中通过判断该标志的值来确定是否要做操作;通过上述方式即可很好地实现鼠标滚动事件的效果,并不会有兼容性的问题出现。注:若仅仅是为表格绑定单一的滚动事件,则可以不显示滚动条,甚至不设置滚动条;滚动条的作用仅仅是用来指示内容区滚动的位置,以及配合拖动事件使用;火狐的鼠标滚轮事件是DOMMouseScroll事件参数兼容:e=window.event||e;(下面省略)preventDefault()函数取消的是默认事件,不会把我们自己添加的事件处理删除在下面验证例子的基础上实验,实验之间代码没有干涉:1.原样输出在元素内无论是手动拉动滚动条还是滚动鼠标滚轮,’d’都是无法出现的。而当元素滚动到达顶部或底部的时候,输出的是就有’d’了,但是这个时候并没有输出’b’,说明scroll事件本来就没有发生冒泡。而document的scroll事件是由于其他因素触发的。2.在element的mousewheel事件处理里把冒泡取消这时候在元素内滚动鼠标滚轮,’c’始终是无法出现的,说明我们阻止mousewheel事件的冒泡成功了。但是在滚动条到达底部或顶部时,虽然’c’依旧没有出现,但是’d’却出现了,说明这个时候的document的scroll事件是靠element的mousewheel来触发的。到这里就出现一个问题:element的mousewheel事件在默认处理里对这一情形进行了处理吗?3.在element的mousewheel事件处理里取消默认处理这时候在元素内滚动鼠标,只会有’a’、’c’会出现,页面也不会滚动。说明鼠标滚轮滚动element页面的效果是由element的mousewheel默认事件处理来的。这个时候留意实验1中滚轮滚动一下免费云主机域名‘b’的输出数量,大概就能猜到默认处理的过程。4.在element的mousewheel里添加一个自己的页面滚动(与默认处理的滚动方向相反)这个时候在元素内滚动鼠标,你会发现即使滚动到顶部或底部,元素外的页面并不会滚动,且并没有输出’d’,也就是document的scroll事件没有触发。不好的一点是你在滚动到底部或顶部时,继续滚动鼠标的话,元素内还是会滚动,只不过是先下再上(或先上再下)地波动一下。5.在element的mousewheel里添加一个自己的页面滚动(与默认处理的滚动方向相同)这个时候在元素内滚动鼠标,你会发现即使滚动到顶部或底部,元素外的页面跟着滚动,且输出’d’,也就是document的scroll事件触发了。这里需要注意到一点:元素的scrollTop属性是无法无限增加和减少的,到了滚动的顶部或底部后只能反向变化(可以自行输出测试)。6.在实验5的基础上,将滚动的距离调整到很大认真观察输出的’b’的个数,和实验1的对比,你会发现这次只有1个’b’,而且还输出了’d’,而且’d’的数量还不少。经过一些其他的实验,得到:默认事件处理里的判断大概如下:验证例子:结论:通过上面的6个实验,很容易发现在元素的mousewheel的默认处理事件里对scrollTop属性进行变化和判断,如果没有发生变化就对外部元素进行滚动一下(具体滚动算法不懂,滚动距离和鼠标滚一下是一样的),以此类推,如果下一个元素到边界了,就再下一个。而这个过程和冒泡是没有关系的,只是当前元素的mousewheel默认事件处理进行的。应用:因此为了实现元素滚动到底时继续滚动却不会使外部元素滚动,我们可以直接取消它的默认处理,然后给一个自己的滚动函数就可以了。至于怎么滚就看自己给什么函数了,而冒泡取不取消也看自己,上面的默认处理在冒泡和捕获阶段是不进行的。例子如下:看完了这篇文章,相信你对“vue中引入mousewheel事件及兼容性处理方式的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注百云主机行业资讯频道,感谢各位的阅读!

相关推荐: CSS3如何实现白色质感3D按钮特效

这篇文章给大家分享的是有关CSS3如何实现白色质感3D按钮特效的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   使用方法   HTML结构      Normal                                  …

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/09 09:38
下一篇 01/09 09:38

相关推荐