摘要：解决思路仔细比较拖拽与点击事件，发现拖拽事件多了一个，我们可以从这个入手，点击事件时与触发时鼠标没有移动，而拖拽时鼠标移动了一定的距离，具体体现在上。此时为，可以触发点击事件。
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，可以触发点击事件。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88500.html
摘要：自定义多级右键菜单实现效果自定义多级右键菜单第五课第六题中已经通过事件实现了一级右键菜单，所以这题只要在上面再添加事件唤出子菜单即可。 0x1完美拖拽 实现效果：6-01完美拖动 这里没有使用h5的拖动，毕竟原题也是考察借助鼠标事件实现自定义的拖动，所以就借鉴了《js高级程序设计》里的自定义拖动自己封装了个拖动api，当然由于做这个系列题目使用的都是es5的语法，所以IE8往下就兼容不...
摘要：前言本篇文章是基础知识的篇，如果前面的基础知识入门篇看完了，现在就可以学习了。基本概念分为三个部分。在这个基础上使用一些新特性，高级浏览器支持，低级浏览器不支持。在对象中的属性是一个布尔值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言 本篇文章是JavaS...
摘要：当用户选择文本框或中的一个或多个字符触发。当文本框或内容改变且失去焦点后触发。事件对象事件对象就是对象，通过处理函数传递。比如右击文本框输入区域，会弹出系统菜单点击超链接会跳转到指定页面点击提交按钮会提交数据。 前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正：Event JavaScript-事件even...
摘要：本教程会使用到语法，而第二部分的项目是用写的。阅读本教程需要你掌握这两项预备知识。在中可以代表组节点边，这个类封装了的操作，本教程不涉及到组的内容。表示在边的正交线上移到的距离。 showImg(https://segmentfault.com/img/remote/1460000018510999?w=935&h=484); 在上一篇文章 《记一次绘图框架技术选型: jsPlumb ...
摘要：在操作中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的坑。在火狐中，与等效的是。对象的属性则表示文档的根节点。不区分和在下使用和时会同时返回或与给定值相同的元素。 js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的坑。 DOM的工作模式是：先加载文档的静态内容、再以动态方式对它们进行刷新，...
阅读 2849·2021-08-20 09:37
阅读 1606·2019-08-30 12:47
阅读 1089·2019-08-29 13:27
阅读 1684·2019-08-28 18:02
阅读 749·2019-08-23 18:15
阅读 3083·2019-08-23 16:51
阅读 931·2019-08-23 14:13
阅读 2124·2019-08-23 13:05
