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!=0true,说明按下了左键

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

二、事件监听使用(bus.emit,bus.on)

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

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

基于vue框架项目开发过程中遇到的问题总结(二)的更多相关文章

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

    这次遇到的一个问题困扰了我很久很久,大致就是vue路由的addRoutes方法的使用,每次在调用了这个之后router对象中并没有将路由添加进去,接下来,我一步一步的分析原因及解决方法(个人见解,仅供 ...

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

    (一)关于computed修改data里变量的值 问题:computed里是不能直接修改data里变量的值,否则在git commit 时会报错 解决:在computed里使用get和set来进行获取 ...

  3. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

  4. Unity项目开发过程中常见的问题,你遇到过吗?

    最近看到有朋友问一个unity游戏开发团队,需要掌握哪些知识之类的问题.事实上Unity引擎是一个很灵活的引擎,根据团队开发游戏类型的不同,对人员的要求也有差异,所以不能一概而论.但是,一些在Unit ...

  5. 项目开发过程中什么是开发环境、测试环境、生产环境、UAT环境、仿真环境?

    项目开发过程中什么是开发环境.测试环境.生产环境.UAT环境.仿真环境? 最近在公司项目开发过程中总用到测试环境,生产环境和UAT环境等,然而我对环境什么的并不是很理解它的意思,一直处于开发阶段,出于 ...

  6. 实际项目开发过程中常用C语言函数的9大用法

    C语言是当中最广泛的计算机编程语言,是所有计算机编程语言的祖先,其他计算机编程语言包括当前流行的Java语言,都是用C语言实现的,C语言是编程效率最高的计算机语言,既能完成上层应用开发,也能完成底层硬 ...

  7. 基于Flask框架搭建视频网站的学习日志(二)

    基于Flask框架搭建视频网站的学习日志(二)2020/02/02 一.初始化 所有的Flask程序都必须创建一个程序实例,程序实例是Flask类的对象 from flask import Flask ...

  8. 基于VUE开发项目

    前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...

  9. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

随机推荐

  1. Java基础--阻塞队列ArrayBlockingQueue

    ArrayBlockingQueue是阻塞队列的一种,基于数组实现,长度固定,队尾添加,队首获取, 构造函数: ArrayBlockingQueue(int capacity) ArrayBlocki ...

  2. (转)详解C#中的反射

    本文转载自:http://blog.csdn.net/educast/article/details/2894892 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到 ...

  3. Mybatis多参数查询映射

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...

  4. 侯捷STL学习(11)--算仿+仿函数+适配器

    layout: post title: 侯捷STL学习(十一) date: 2017-07-24 tag: 侯捷STL --- 第三讲 标准库内核分析-算法 标准库算法形式 iterator分类 不同 ...

  5. Oracle 多表查询(2)

    四.统计函数及分组查询 1.统计函数 在之前学习过一个COUNT()函数,此函数的功能可以统计出表中的数据量,实际上这个就是一个统计函数,而常用的统计函数有如下几个: COUNT():查询表中的数据记 ...

  6. Spring MVC配置详解(1)

    web.xml的配置 <!-- 配置前端控制器 前端控制器(DispatcherServlet)--> <servlet> <servlet-name>spring ...

  7. 关于更新pip的心得

    如果pip install --upgrade pip 删除了自己,但是无法安装新的自己. 那么下载最新的pip,解压 1.在命令窗口输入  python(前提条件已经在系统路径)  setup.py ...

  8. Shell编程进阶 1.2 shell结构及执行

    创建一个shell脚本 mkdir shell vim first.sh #!/bin/bash ##The first test shell script. ##Written by wangsha ...

  9. Android Studio Build APK没有报错,但是Generate signed apk报错

    有时候 ,我们在调试APK,直接Build是可以正常生成,没有报错,但是当我们将自己的签名文件加上去,就会报错.一般情况下,我们可以在build.gradle中的android{}里面添加一个东西 l ...

  10. day36-hibernate检索和优化

    连接查询是多表查询.