经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue中引入mousewheel事件及兼容性处理方式
来源:jb51  时间:2022/3/8 10:54:44  对本文有异议

引入mousewheel事件及兼容性处理

项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮(mousewheel)事件,方便查看数据;其实现原理与我上一篇博客中的拖动事件类似,利用模拟出来的同一个滚动条来实现

滚动条设置的要点在于

1、滚动条与滚动槽的高度比例 应该等于 内容区(动态变化)和可视区的高度比例;滚动槽与可视区平齐,高度一样;滚动条的高度则根据内容的高度等比例计算;

2、各元素的定位采用绝对定位,其父元素采用相对定位,这样就能很好地设置样式;

布局与样式做好后,只需要在组件methods注册方法,在元素就位后调用该方法,在方法内部为表格绑定(mousewheel)事件;在这里需要考虑兼容性问题,firefox并不支持mousewheel事件,它对应的鼠标滚动事件为DOMMouseScroll事件,并且该事件仅能通过DOM2级(addEventListener)添加处理程序;并且判断鼠标滚动方向的方式也不一样,firefoxt通过detail属性判断,向前滚动该属性为-3,向后+3;其余浏览器通过wheelDelta属性,向前时为+120的倍数,向后为-120的倍数;

具体内容可参考《js高级程序设计》事件一章;添加函数如下:

? ? scroll(){
? ? ? ? this.wrapDiv = document.getElementById("wrap");
? ? ? ? this.contentDiv = document.getElementById("context-table");
? ? ? ? this.contentDiv1 = document.getElementById("context-table1");
? ? ? ? this.sliderWrap = document.getElementById("sliderWrap");
? ? ? ? this.slider = document.getElementById("slider");
? ? ? ? //设置比例
? ? ? ? let scale = ?this.wrapDiv.clientHeight / ?this.contentDiv.clientHeight;
? ? ? ? if (scale < 1) {
? ? ? ? ? this.mouseFlag = true;
? ? ? ? ? let h1 = ?this.sliderWrap.clientHeight * scale;
? ? ? ? ? h1 = (h1 < 50) ? 50 : h1;
? ? ? ? ? this.slider.style.height = h1 + "px";/*滚动条高度动态变化*/
? ? ? ? ? let y = 0;
? ? ? ? ? let that = this;
? ? ? ? ? //为firefox添加滚轮事件
? ? ? ? ? if (document.addEventListener){
? ? ? ? ? ? document.addEventListener('DOMMouseScroll',function (e) {
? ? ? ? ? ? ? ? if(that.mouseFlag){
? ? ? ? ? ? ? ? ? //console.log('scroll');
? ? ? ? ? ? ? ? ? let event1 = window.event|| e;
? ? ? ? ? ? ? ? ? y = (event1.detail > 0) ? y + 8 : y - 8;
? ? ? ? ? ? ? ? ? y = (y < 0) ? 0 : y;
? ? ? ? ? ? ? ? ? let max = that.sliderWrap.clientHeight - that.slider.clientHeight;
? ? ? ? ? ? ? ? ? y = (y > max + 1) ? max + 1 : y;
? ? ? ? ? ? ? ? ? that.slider.style.top = y + "px";
? ? ? ? ? ? ? ? ? scale = that.wrapDiv.clientHeight / that.contentDiv.clientHeight;
? ? ? ? ? ? ? ? ? let y1 = -y / scale;
? ? ? ? ? ? ? ? ? that.contentDiv.style.top = y1 + "px";
? ? ? ? ? ? ? ? ? that.contentDiv1.style.top = y1 + "px";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },false)
? ? ? ? ? }
? ? ? ? ? this.wrapDiv.onmousewheel = function (e) {
? ? ? ? ? ? if (scale < 1) {
? ? ? ? ? ? ? let event1 = window.event || e;
? ? ? ? ? ? ? y = (event1.wheelDelta < 0) ? y + 8 : y - 8;
? ? ? ? ? ? ? y = (y < 0) ? 0 : y;/*限定滚动范围*/
? ? ? ? ? ? ? let max = ?that.sliderWrap.clientHeight - ?that.slider.clientHeight;
? ? ? ? ? ? ? //console.log(scale, y, sliderWrap.clientHeight, slider.clientHeight);
? ? ? ? ? ? ? y = (y > max + 1) ? max + 1 : y;
? ? ? ? ? ? ? that.slider.style.top = y + "px";
? ? ? ? ? ? ? scale = ?that.wrapDiv.clientHeight / ?that.contentDiv.clientHeight;
? ? ? ? ? ? ? let y1 = -y / scale;
? ? ? ? ? ? ? that.contentDiv.style.top = y1 + "px";
? ? ? ? ? ? ? that.contentDiv1.style.top = y1 + "px";
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? ? else{/*当内容区高度小于等于可视区时,去除绑定的事件和滚动条*/
? ? ? ? ? this.wrapDiv.onmousewheel =null;
? ? ? ? ? if(document.addEventListener){
? ? ? ? ? ? ?this.mouseFlag = false;
? ? ? ? ? }
? ? ? ? ? this.sliderWrap.style.visibility = 'hidden';
? ? ? ? ? let height = this.contentDiv.clientHeight;
? ? ? ? ? tableRight.style.height ?= height+72+'px';
? ? ? ? ? this.wrapDiv.style.height = height+2+'px';
? ? ? ? }
? ? ? },

该函数在给firefox绑定的事件解绑时遇到了问题,由于removeEventListener()需要通过句柄来解绑,而addEventListener()通过句柄添加处理函数会导致event参数无法传递的问题;即使在需要解绑时给document绑定空的处理函数也无法覆盖前一个绑定函数;最后只好添加一个标志,在需要解绑函数时改变标志的值;在绑定函数中通过判断该标志的值来确定是否要做操作;

通过上述方式即可很好地实现鼠标滚动事件的效果,并不会有兼容性的问题出现。

注:若仅仅是为表格绑定单一的滚动事件,则可以不显示滚动条,甚至不设置滚动条;滚动条的作用仅仅是用来指示内容区滚动的位置,以及配合拖动事件使用; 

关于scroll和mousewheel事件的问题

需要注意的点

火狐的鼠标滚轮事件是DOMMouseScroll

事件参数兼容:e=window.event||e;(下面省略)

preventDefault()函数取消的是默认事件,不会把我们自己添加的事件处理删除

实验开始

在下面验证例子的基础上实验,实验之间代码没有干涉:

1.原样输出

在元素内无论是手动拉动滚动条还是滚动鼠标滚轮,'d'都是无法出现的。而当元素滚动到达顶部或底部的时候,输出的是就有'd'了,但是这个时候并没有输出'b',说明scroll事件本来就没有发生冒泡。而document的scroll事件是由于其他因素触发的。

2.在element的mousewheel事件处理里把冒泡取消

e.stopPropagation();

这时候在元素内滚动鼠标滚轮,'c'始终是无法出现的,说明我们阻止mousewheel事件的冒泡成功了。但是在滚动条到达底部或顶部时,虽然'c'依旧没有出现,但是'd'却出现了,说明这个时候的document的scroll事件是靠element的mousewheel来触发的。

到这里就出现一个问题:element的mousewheel事件在默认处理里对这一情形进行了处理吗?

3.在element的mousewheel事件处理里取消默认处理

e.preventDefault();

这时候在元素内滚动鼠标,只会有'a'、'c'会出现,页面也不会滚动。说明鼠标滚轮滚动element页面的效果是由element的mousewheel默认事件处理来的。这个时候留意实验1中滚轮滚动一下'b'的输出数量,大概就能猜到默认处理的过程。

4.在element的mousewheel里添加一个自己的页面滚动(与默认处理的滚动方向相反)

element.scrollTop+=e.wheelDelta>0?30:-30;//手动添加的页面滚动

这个时候在元素内滚动鼠标,你会发现即使滚动到顶部或底部,元素外的页面并不会滚动,且并没有输出'd',也就是document的scroll事件没有触发。不好的一点是你在滚动到底部或顶部时,继续滚动鼠标的话,元素内还是会滚动,只不过是先下再上(或先上再下)地波动一下。

5.在element的mousewheel里添加一个自己的页面滚动(与默认处理的滚动方向相同)

element.scrollTop+=e.wheelDelta<0?30:-30;//手动添加的页面滚动

这个时候在元素内滚动鼠标,你会发现即使滚动到顶部或底部,元素外的页面跟着滚动,且输出'd',也就是document的scroll事件触发了。

这里需要注意到一点:元素的scrollTop属性是无法无限增加和减少的,到了滚动的顶部或底部后只能反向变化(可以自行输出测试)。

6.在实验5的基础上,将滚动的距离调整到很大

element.scrollTop+=e.wheelDelta<0?300:-300;(值要大等于滚动行程)

认真观察输出的'b'的个数,和实验1的对比,你会发现这次只有1个'b',而且还输出了'd',而且'd'的数量还不少。经过一些其他的实验,得到:默认事件处理里的判断大概如下:

(function scroll(element){
? ? for(var i=0;i<12;i++){
? ? ? ? var temp=element.scrollTop;
? ? ? ? element.scrollTop+=e.wheelDelta<0?10:-10; //滚动算法肯定不是这个,这里只是简单演示
? ? ? ? if(temp!= element.scrollTop){
? ? ? ? ? ? //滚动‘消息树'的下一个元素(和冒泡是一个列表)
? ? ? ? ? ? var newEle=....//消息树怎么获取我不懂
? ? ? ? ? ? scroll(newEle);
? ? ? ? ? ? return;
? ? ? ? }
? ? }
})();

验证例子:

? ? ? ?addEventListener(element,'mousewheel',function(e){
? ? ? ? ? ? console.log('a');
? ? ? ? });
? ? ? ? addEventListener(element,'scroll',function(e){
? ? ? ? ? ? console.log('b');
? ? ? ? });
? ? ? ? addEventListener(document.documentElement,'mousewheel',function(e){
? ? ? ? ? ? console.log('c');
? ? ? ? });
? ? ? ? addEventListener(document,'scroll',function(e){
? ? ? ? ? ? console.log('d');
? ? ? ? });

结论:通过上面的6个实验,很容易发现在元素的mousewheel的默认处理事件里对scrollTop属性进行变化和判断,如果没有发生变化就对外部元素进行滚动一下(具体滚动算法不懂,滚动距离和鼠标滚一下是一样的),以此类推,如果下一个元素到边界了,就再下一个。而这个过程和冒泡是没有关系的,只是当前元素的mousewheel默认事件处理进行的。

应用:因此为了实现元素滚动到底时继续滚动却不会使外部元素滚动,我们可以直接取消它的默认处理,然后给一个自己的滚动函数就可以了。至于怎么滚就看自己给什么函数了,而冒泡取不取消也看自己,上面的默认处理在冒泡和捕获阶段是不进行的。

例子如下:

? ? ? ?addEventListener(element,'mousewheel',function(e){
? ? ? ? ? ? console.log('a');
? ? ? ? ? ? e.preventDefault();
? ? ? ? ? ? // e.stopPropagation();
? ? ? ? ? ? ulObj.scrollTop+=e.wheelDelta<0?20:-20;
? ? ? ? });
? ? ? ? addEventListener(element,'scroll',function(e){
? ? ? ? ? ? console.log('b');
? ? ? ? });
? ? ? ? addEventListener(document.documentElement,'mousewheel',function(e){
? ? ? ? ? ? console.log('c');
? ? ? ? });
? ? ? ? addEventListener(document,'scroll',function(e){
? ? ? ? ? ? console.log('d');
? ? ? ? });

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接: NPS