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

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