解决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,可以触发点击事件。

代码:
 1         var x1,x2,y1,y2,dragFlag=false;
 2         //maker的拖拽结束事件
 3         marker.addEventListener("dragend",function(){
 4             var me=this;
 5             attribute(dragFlag,this)
 6         });
 7         marker.addEventListener("mousedown",function(e){
 8             x1=e.clientX;
 9             y1=e.clientY;
10             console.log(x1+";"+y1);
11         });//mousedown记录鼠标位置1
12         marker.addEventListener("mouseup",function(e){
13             x2=e.clientX;
14             y2=e.clientY;
15             console.log(x2+";"+y2);
16             var _val=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
17             console.log(_val);
18             //判断
19             if(_val>=0&&_val<=2){
20                 dragFlag=true;
21             }else{
22                 dragFlag=false;
23             }
24         });//mouseup记录鼠标位置2
 
 
 

原文地址:https://www.cnblogs.com/pengfei25/p/8604398.html

时间: 2024-10-10 05:03:52

解决JavaScript拖动时同时触发点击事件的BUG的相关文章

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 1 <ul id="demo"> 2 <li c

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法

bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore下的index.js,全部引入的要找mint下面mint-ui.common.js 路径如下:你的项目名/node_modules\mint-ui\lib\loadmore\index.js 搜索 handleTouchEnd ,记得写event进去 handleTouchEnd: function

view.performClick()触发点击事件

1.主要作用 自动触发控件的点击事件 2.界面的布局文件  activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_h

防止滑动的时候触发点击事件

手机端在滑动过程中容易引发点击事件 解决方案: 重新封装一个点击函数 //防止滑动的时候触发点击事件 function tap(sprite, cb) { var tapStartTime = 0, tapEndTime = 0, tapTime = 300, //tap等待时间,在此事件下松开可触发方法 tapStartClientX = 0, tapStartClientY = 0, tapEndClientX = 0, tapEndClientY = 0, tapScollHeight =

Android listview的item点击事件失效Bug的解决

原因:listview布局中出现了button  .imaageButton.checkBox等可以点击的控件 第一种解决方法:在布局中添加android:descendantFocusability="blocksDescendants" 第二种解决方法:使用其他控件代替,在activity中用setOnClickListener监听点击事件

button按钮触发点击事件后出现自动跳转问题

在项目中遇到在点击+号按钮后出现跳转.该button在form表单内,分析原因得知,触发事件后button按钮自动提交了表单,从而出现跳转. 查找手册得知button type有三个属性值,其中默认为submit,所以在未添加type属性时,button默认为submit. 此问题在button中添加type="button"则恢复正常. 值 描述 submit 默认.按钮是提交按钮. button 按钮时可点击的按钮. reset 按钮是重置按钮(清空数据). 原文地址:https:

触发点击事件,接受后台参数,并把隐藏的div显示出来

1点击事件 1.1重点112和114行,112用的是正则表达式,114是加一些查找的限制,如是中文并且得3个中文字符才会自动查询.没有这些限制的话,键盘敲一次,就会查询一次,特别麻烦!!! 1.2 注意json传参数的方式 2.1接受后台参数 先把要查询的公司名字发送给后台,通过模糊查询返回一个lis给前端 把查询到的值通过不同的id.来接受. 3.1并把隐藏的div显示出来 这里用 $("#id").show();是显示不了的.因为在要显示的字段前已经被 220行这句话给全部隐藏了

RadioButtonList绑定后台数据,触发点击事件

首先前台页面放置一个RadioButtonList 控件 <asp:RadioButtonList runat="server" ID="RadioButtonList1" BorderStyle="None" RepeatColumns="3" CssClass="" RepeatLayout="Flow" AutoPostBack="true" OnSele

为啥使用Iscroll.js之后,a不能触发点击事件?

原因:是iscroll.js阻止了a的行为. 解决方法:打开iscroll-probe.js,然后找到preventDefaultException方法. 然后修改为: // preventDefault: true,preventDefault: false,//(把这句加上去哦)preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ },  //(这个后面加|A,因为iscroll阻止了A的默认事件)