博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决JavaScript拖动时触发点击事件的BUG
阅读量:6148 次
发布时间:2019-06-21

本文共 509 字,大约阅读时间需要 1 分钟。

bug的原因:

一个完整的click事件是包含
mousedown,mouseup
两个事件的,而拖拽一个元素时,包含下面三个事件:
mousedown,mousemove,mouseup,
所以我们在拖拽一个元素结束后,如果此元素上面绑定了点击事件, 就会同时触发元素的点击事件,用户体验度不好。

解决思路

仔细比较拖拽与点击事件,发现拖拽事件多了一个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,可以触发点击事件。

转载地址:http://rwqya.baihongyu.com/

你可能感兴趣的文章
nilfs (a continuent snapshot file system) used with PostgreSQL
查看>>
【SICP练习】150 练习4.6
查看>>
HTTP缓存应用
查看>>
KubeEdge向左,K3S向右
查看>>
DTCC2013:基于网络监听数据库安全审计
查看>>
CCNA考试要点大搜集(二)
查看>>
ajax查询数据库时数据无法更新的问题
查看>>
Kickstart 无人职守安装,终于搞定了。
查看>>
linux开源万岁
查看>>
linux/CentOS6忘记root密码解决办法
查看>>
25个常用的Linux iptables规则
查看>>
集中管理系统--puppet
查看>>
分布式事务最终一致性常用方案
查看>>
Exchange 2013 PowerShell配置文件
查看>>
JavaAPI详解系列(1):String类(1)
查看>>
HTML条件注释判断IE<!--[if IE]><!--[if lt IE 9]>
查看>>
发布和逸出-构造过程中使this引用逸出
查看>>
Oracle执行计划发生过变化的SQL语句脚本
查看>>
使用SanLock建立简单的HA服务
查看>>
发现一个叫阿尔法城的小站(以后此贴为我记录日常常用网址的帖子了)
查看>>