JavaScript区分click事件和mousedown(mouseup、mousemove)方法
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果。而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们希望在拖拽元素的时候不希望它执行click方法,在执行click方法是不希望执行mousedown和mouseup方法。
比如如下代码,就会出现上面的问题:
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script src="js/jquery-1.11.2.js"></script><script>$(function(){$("#mydiv").on("click",function(){console.log("this is click event");});$("#mydiv").on("mousedown",function(){console.log("this is mousedown event");});$("#mydiv").on("mouseup",function(){console.log("this is mouseup event");}); });</script> </head> <body><div id="mydiv" style="width:200px;height:200px;background: red;"> </div> </body> </html>
上述代码在控制台的输出结果如下:
this is mousedown event
this is mouseup event
this is click event
可以看到,mousedown 和mouseup是优先于click事件先执行的。
而我们希望的效果是,在移动元素的操作中不执行click事件,在执行click事件时不调用mousedown和mouseup方法。
区分click事件和鼠标拖拽元素后在松开事件其实很简单,用一个全局标识符就可以了。
我们不用在为元素绑定click事件,而是只使用它的mousedown,mousemove,mouseup事件来判断是否该元素被拖拽了。
具体参见代码,可以看注释:
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script src="js/jquery-1.11.2.js"></script><script>$(function(){var hasMove=false; //全局标识,初始化标识元素没有发生mousemove $("#mydiv").on("mousedown",function(){hasMove=false;});$("#mydiv").on("mouseup",function(){//根据是否发生移动状态来模拟click事件和拖拽后释放鼠标事件if(hasMove){console.log("移动后鼠标松开事件");}else{console.log("没有移动鼠标松开事件,模拟click");}hasMove=false; //还原标识,以便下一次使用 });$("#mydiv").on("mousemove",function(){hasMove=true; //元素移动事件中跟新标识为true,表示有发生移动 });});</script> </head> <body><div id="mydiv" style="width:200px;height:200px;background: red;"> </div> </body> </html>
效果和控制台如图
如此,放弃使用click事件机制,以mousemove事件和mouseup事件动态改变全局标识符,来区分在鼠标释放一刻元素是否发生移动,以此来判断该事件是click还是拖拽。
感谢阅读。
转载于:https://www.cnblogs.com/chunyangji/p/5896933.html
JavaScript区分click事件和mousedown(mouseup、mousemove)方法相关推荐
- js区分click事件和mousedown、单击和双击事件
一.点击和拖动 1.问题 对于同一个对象进行的操作涉及点击(click)和拖动(mousedown,mousemove,mouseup),而拖动中又会触发一次点击事件 2.解决:设置全局变量判断点击之 ...
- JavaScript 触发click事件 兼容FireFox,IE 和 Chrome
解决了火狐下无法触发click事件的问题 <script language="javascript">function test2(name){if(document. ...
- mousedown mousemove mouseup 与 click事件冲突的解决办法
使用css样式pointer-events解决 需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup ...
- mousedown、mouseup、click事件之间的关系及执行顺序
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件. 与 click 事件不同,mousedown 事件仅需要按键被按 ...
- 关于界面的mousedown、mouseup、click事件
三个事件的触发时机 1.mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件. 与 click 事件不同,mousedown 事件仅需要按键 ...
- fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍 在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
- click事件在什么时候出发_什么是移动端?
主要内容什么是移动端.移动端视口.rem em px区别.移动端适配.移动端布局和马蜂窝案例. 结合视频学习效果更佳: https://www.bjsxt.com/down/9319.htmlwww ...
- 移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
- click事件和onclick事件的区别
1,click事件的api解释(jquery中) 返回值:jQueryclick([[data],fn]) 概述 触发每一个匹配元素的click事件. 这个函数会调用执行绑定到click事件的所有函数 ...
最新文章
- SQL Server 游标的使用示例
- [云炬商业计划书阅读分享]校园快递创业计划书
- Asp.net生成缩略图
- 卷积码Viterbi译码算法基本原理及C语言实现
- Spring常用注解汇总
- 欧菲光:拟对子公司江西晶超增资9亿元
- 机器视觉:嵌入式视觉系统中的接口
- 获取公司的maven库 和 idea maven 中Projects Settings的Libraries中正常,但是在Maven Projects中Dependencies一直出现红线的解决办法
- bytes的json解析
- ajax、axios、fetch之间的详细区别以及优缺点
- Dual Thrust(期货)
- Mask-rcnn算法流程图
- Mac 输入法小技巧
- 不可不知的设计师接活报价公式
- 怎么调linux系统的屏幕刷新率,怎么改屏幕的刷新率?
- 记录学习Android基础的心得07:硬件控制P1
- linux网卡连接失败设备无法激活
- 数字工厂管理系统的应用领域有哪些
- Java Web关键字填空
- oracle安装成功验证