1、mouseup事件丢失
查看了网上资料,造成mouseup事件丢失有两种原因:
(1)触发了浏览器的drag事件
(2)由于鼠标离开了操作的区域,触发了mouseleave事件导致mouseup丢失
解决办法:
针对第一种情况:阻止系统默认操作防止drag被触发
在@mouseup或v-on:mouseup后面加上.prevent阻止默认操作,和.stop阻止事件冒泡(此方法是根据网上原生js改写,还没有实践)
同时记录下网上的的原生解决办法
第二种情况:
由于鼠标是移出了操作范围而丢失mouseup,那么我们需要将mouseup事件监听范围扩大至document,即可实现全页面监听,当然也可以监听mouseleave事件,当触发mouseleave事件时可以停止或还原操作,需根据实际情况而定
下面介绍如何实现全页面监听:
给document增加mouseup的监听事件,具体操作写至mouseUpHandler函数中(此处用原生js做)
其实mousemove与mouseup存在相同的问题,处理方法一致
拓展:鼠标按键事件(Mouse事件的 buttons
属性)
0:没有按键或没有初始化
1:左键
2:右键
4:中键或滚轮
8:第四按键(通常为‘浏览器后退’键)
16:第五按键(通常为‘浏览器前进’键)
如果是可触发多个按键事件时,使用 | 来连接操作,鼠标左右键同时按下1|2=3,判断是否按下左键可以用value&1!=0
进行,例如左右键同时按下时3&1!=0
是true
,说明按下了左键
部分参考地址:https://blog.csdn.net/isea533/article/details/71703442