解决JavaScript拖动时同时触发点击事件的BUG
在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件,造成不好的用户体验
bug的原因
一个完整的click事件是包含 mousedown,mouseup
两个事件的,而拖拽一个元素时,包含下面三个事件:
mousedown,mousemove,mouseup,
所以我们在拖拽一个元素结束后,如果此元素上面绑定了点击事件,
就会同时触发元素的点击事件,或者用户只是想触发点击事件,但是又同时出发了drag事件,用户体验度不好。
解决思路
仔细比较拖拽与点击事件,发现拖拽事件多了一个mousemove,我们可以从这个mousemove入手,点击事件 时mousedown与mouseup触发时鼠标没有移动,而拖拽时鼠标移动了一定的距离,具体体现在px上。
解决办法
可以设定一个clickFlag变量,通过clickFlag来确定mousedown与mouseup到底是触发了点击事件还是
拖动事件:
mousedown时记录下鼠标的位置x1,y1,mouseup时记录下鼠标的位置x2,y2,
判断两次位置
是否一样或是相差小于一个定值(设为7px):
d = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))
当d=0或是小于7时,即可认定用户没有拖拽。此时clickFlag为true,可以触发点击事件。
代码:
var x1,x2,y1,y2,dragFlag=false;
//maker的拖拽结束事件
marker.addEventListener("dragend",function(){
var me=this;
attribute(dragFlag,this)
});
marker.addEventListener("mousedown",function(e){
x1=e.clientX;
y1=e.clientY;
console.log(x1+";"+y1);
});//mousedown记录鼠标位置1
marker.addEventListener("mouseup",function(e){
x2=e.clientX;
y2=e.clientY;
console.log(x2+";"+y2);
var _val=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
console.log(_val);
//判断
if(_val>=0&&_val<=2){
dragFlag=true;
}else{
dragFlag=false;
}
marker.removeEventListener("mousemove");
});//mouseup记录鼠标位置2
注意:mouseup之后需要注销mousemove的事件,否则在其他的页面点击事件中也会触发拖动的move事件,累计触发
解决JavaScript拖动时同时触发点击事件的BUG的更多相关文章
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
- vue中Enter触发登录事件和javascript中Enter触发点击事件
created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...
- 关于AJAX异步加载节点无法触发点击事件问题的解决方式
做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...
- view.performClick()触发点击事件
1.主要作用 自动触发控件的点击事件 2.界面的布局文件 activity_main.xml <RelativeLayout xmlns:android="http://schema ...
- JS实现按下按键触发点击事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 可以触发点击事件并变色的UILabel
可以触发点击事件并变色的UILabel 谁说UILabel不能够当做button处理点击事件呢?今天,笔者就像大家提供一个改造过的,能够触发点击事件并变色的UILabel:) 效果图: 还能当做计时器 ...
- jQuery实现当按下回车键时绑定点击事件
jQuery实现当按下回车键时绑定点击事件 <script> $(function(){ $(document).keydown(function(event){ if(event.key ...
- Echarts如何添加鼠标点击事件?防止重复触发点击事件
Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...
- 【javascript】iOS Safari 中点击事件失效的解决办法
问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. ...
随机推荐
- Sublime Text3下载激活汉化
一.下载 Sublime Text3下载 http://www.sublimetext.com/3 选择对应的版本下载即可. 二.激活 2.1 官网购买license key激活 2.2 网上查找各种 ...
- 解决Hbuilder打包的apk文件按手机返回键直接退出软件
问题描述:Hbuilder打包的app如果点击手机返回键,app会直接退出,返回不了上一页. 写在公共js文件中,每个页面均引入该js,代码如下: document.addEventListener( ...
- Tomcat负载均衡原理详解及配置(Apache2.2.19+Tomcat7.0.12)
结构图 JAVA项目一般直接用Tomcat作为Web服务器.为了增加tomcat的性能和稳定性,我们一般采用balance和session同步机制. 下图列出了我们常用也是最简单的解决方案. 说明 1 ...
- c#代码片段新建(sinppet)
在c#里面我们经常用到 1.if 然后按2下Tab,出来下面一段代码 if (true) { } 2.propfull private int myVar; public int MyProperty ...
- SOLR企业搜索平台 二 (分词安装)
标签:linux lucene 分词 solr 全文检索 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://3961409.blog ...
- Python【变量】
本文介绍 1.Python运算符 运算符分类 运算符分为:算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算 一.算数运算:返回数字 假设变量a=10,b=20 运算符: + 相加a+ ...
- Windows上编译OpenEXR
注意一定要使用1.0.1版本的ilmbase和1.6.1版本的openexr,其它版本的我测试过,OpenImageIO会编译失败. 解压ilmbase 1.0.1到[工作目录]/openexr/il ...
- “全栈2019”Java第二十六章:流程控制语句中循环语句do-while
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- mycat 1.6.6.1安装以及配置docker 安装mysql 5.7.24 双主多从读写分离主主切换
mycat和mysql的高可用参考如下两个图 简介:应用程序仅需要连接HAproxy或者mycat,后端服务器的读写分离由mycat进行控制,后端服务器数据的同步由MySQL主从同步进行控制. 服务器 ...
- git 使用技巧之采用别名,简化命令
git config --global alias.st status git config --global alias.ci commit git config --global alias.co ...