基于vue框架项目开发过程中遇到的问题总结(二)

时间:2024-03-20 21:56:11

1、mouseup事件丢失

查看了网上资料,造成mouseup事件丢失有两种原因:

(1)触发了浏览器的drag事件

(2)由于鼠标离开了操作的区域,触发了mouseleave事件导致mouseup丢失

解决办法:

针对第一种情况:阻止系统默认操作防止drag被触发

在@mouseup或v-on:mouseup后面加上.prevent阻止默认操作,和.stop阻止事件冒泡(此方法是根据网上原生js改写,还没有实践)

同时记录下网上的的原生解决办法

基于vue框架项目开发过程中遇到的问题总结(二)

 

第二种情况:

由于鼠标是移出了操作范围而丢失mouseup,那么我们需要将mouseup事件监听范围扩大至document,即可实现全页面监听,当然也可以监听mouseleave事件,当触发mouseleave事件时可以停止或还原操作,需根据实际情况而定

下面介绍如何实现全页面监听:

基于vue框架项目开发过程中遇到的问题总结(二)

给document增加mouseup的监听事件,具体操作写至mouseUpHandler函数中(此处用原生js做)

其实mousemove与mouseup存在相同的问题,处理方法一致

拓展:鼠标按键事件(Mouse事件的 buttons 属性)

0:没有按键或没有初始化

1:左键

2:右键

4:中键或滚轮

8:第四按键(通常为‘浏览器后退’键)

16:第五按键(通常为‘浏览器前进’键)

如果是可触发多个按键事件时,使用 | 来连接操作,鼠标左右键同时按下1|2=3,判断是否按下左键可以用value&1!=0进行,例如左右键同时按下时3&1!=0true,说明按下了左键

部分参考地址:https://blog.csdn.net/isea533/article/details/71703442