基于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

二、事件监听使用（bus.emit,bus.on）

这个是我自己的思路问题，在一个编辑页面中，封装了一个组件作为元素，页面上可以同时有很多该元素，可对这些元素进行缩放、移动、组合、多选...，当选中多个元素同时进行缩放或移动时，由于将触发事件全部绑定在各自元素上，造成绑定的事件过多，且删除某个元素后，没有同步做事件清除，造成操作混乱。之后大佬重新做了下这块，将事件绑定在了父组件上，这样就完美解决了问题。这个还是需要看源码比较清晰，思路大概是这样的

值得注意的是，bus.on需要在mounted中写