基于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中写
基于vue框架项目开发过程中遇到的问题总结(二)的更多相关文章
- 基于vue框架项目开发过程中遇到的问题总结(三)
这次遇到的一个问题困扰了我很久很久,大致就是vue路由的addRoutes方法的使用,每次在调用了这个之后router对象中并没有将路由添加进去,接下来,我一步一步的分析原因及解决方法(个人见解,仅供 ...
- 基于vue框架项目开发过程中遇到的问题总结(一)
(一)关于computed修改data里变量的值 问题:computed里是不能直接修改data里变量的值,否则在git commit 时会报错 解决:在computed里使用get和set来进行获取 ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- Unity项目开发过程中常见的问题,你遇到过吗?
最近看到有朋友问一个unity游戏开发团队,需要掌握哪些知识之类的问题.事实上Unity引擎是一个很灵活的引擎,根据团队开发游戏类型的不同,对人员的要求也有差异,所以不能一概而论.但是,一些在Unit ...
- 项目开发过程中什么是开发环境、测试环境、生产环境、UAT环境、仿真环境?
项目开发过程中什么是开发环境.测试环境.生产环境.UAT环境.仿真环境? 最近在公司项目开发过程中总用到测试环境,生产环境和UAT环境等,然而我对环境什么的并不是很理解它的意思,一直处于开发阶段,出于 ...
- 实际项目开发过程中常用C语言函数的9大用法
C语言是当中最广泛的计算机编程语言,是所有计算机编程语言的祖先,其他计算机编程语言包括当前流行的Java语言,都是用C语言实现的,C语言是编程效率最高的计算机语言,既能完成上层应用开发,也能完成底层硬 ...
- 基于Flask框架搭建视频网站的学习日志(二)
基于Flask框架搭建视频网站的学习日志(二)2020/02/02 一.初始化 所有的Flask程序都必须创建一个程序实例,程序实例是Flask类的对象 from flask import Flask ...
- 基于VUE开发项目
前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...
- 基于vue现有项目的服务器端渲染SSR改造
前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...
随机推荐
- Azure VM开启资源监控
目前China的Azure VM资源监控默认是不打开的.本文将介绍如何开启VM的监控功能. 一 Azure VM 打开Azure的Portal页面https://portal.azure.cn,登录后 ...
- JSF拦截ajax请求并传递参数方法
我们可以利用f:ajax做一些简单的ajax操作,但是遇到复杂的逻辑,它不能简单的去实现,jsf提供了一种方法,可以调用它内部的js方法去实现复杂的逻辑. 首先要在页面引入jsf的js文件: < ...
- POJ1061(线性同余方程)
青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 105587 Accepted: 20789 Descript ...
- 微服务监控之一:Metrics让微服务运行更透明
摘要 让微服务运行状态清晰可见. 嘉宾演讲视频回顾及PPT:http://t.cn/R8b6i85 Metrics是什么 直译是“度量”,不同的领域定义有所区别,在微服务领域中的定义: “对微服务的某 ...
- 天梯L2-001. 紧急救援(25分)
L2-001. 紧急救援 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国 ...
- TP-Link WR703N OpenWRT固件修改WAN LAN排序
有一种方法就是macvlan了.添加到rc.local文件中,具体不再阐述. 此方法只适合编译固件的情况下调整WAN/LAN顺序. wr703n等(包含其他未列出的单网口路由,AP),修改WAN LA ...
- 问题:oracle触发器无效且未通过重新验证;结果:触发器里面没有加分号(;)
oracle无效且未通过重新验证 代码如下: SQL code如下: --创建中国地图表 create table china_address ( id number not null ...
- leetcode479
public class Solution { public int LargestPalindrome(int n) { ) ; , n) - ; ; v > max / ; v--) { S ...
- NSOperation/NSOperationQueue详细使用介绍
一.简介 (1)是使用GCD实现的一套Objective-C的API (2)是面向对象的线程技术 (3)提供了一些在GCD中不容易实现的特性,如:限制最大并发数量.操作之间的依赖关系 NSOp ...
- myeclipse实用快捷键
笔者这里总结的是个人在使用myeclipse时常用的快捷操作,总结如下: 1.Ctrl + / :为选中的一段代码加上或去掉注释符 Ctrl + Shift + / :( ...