mousedown mousemove mouseup 与 click事件冲突的解决办法

最新推荐文章于 2024-01-23 16:56:48 发布
最新推荐文章于 2024-01-23 16:56:48 发布
阅读量5k 收藏 4
点赞数 3
分类专栏： # JavaScript 文章标签： 前端 html javascript
原文链接：https://blog.csdn.net/weixin_45042868/article/details/120510519
版权

使用css样式pointer-events解决
需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中，但是click的触发条件就是mousedown+mouseup，而且它们的执行顺序也是

mousedown > mousemove > mouseup > click
 
先说一下我的场景：我在做一个拖拽方法，但是我不希望在拖拽的时候触发容器内部的click事件。
理一下思路
要实现拖拽方法需要 mousedown + mousemove + mouseup
click事件需要 mousedown + mouseup
那么只要想个办法阻止mousedown 和 mouseup 同时发生，就能阻止click事件，看到拖拽方法中多的一个mousemove事件，显而易见的只能是在这上面找找办法了。

解决办法
pointer-events属性可以阻止设置了该样式的容器的鼠标事件的触发，也就是说设置了该属性，这个容器就无法点击了，并且这个容器内部的任何点击行为都无法触发，但是如果容器内部的元素也设置了该属性的其他值，则可以继续触发。利用该属性，可以达到组织事件穿透的效果。

我在mousemove的监听事件中加入了这行代码，此时，在我开始拖动的时候，对于click事件来说，原先的mousedown事件就丢失了，因此click事件不满足触发条件，无法执行

// el指的是dom元素，你要阻止事件穿透的容器
el.style.pointerEvents = 'none'
 
然后我在mouseup的监听事件中将值取消，来恢复el这个容器的点击行为

el.style.pointerEvents = null
 
不该在 mousedown 中设置该属性，否则按钮的click事件就无法执行了,就像前面说的，click事件的执行需要mousedown + mouseup，毕竟拖动事件和容器内部的点击事件都是要先进行mousedown才能继续往下走的。

参考文章
div阻止点击穿透+实现点击穿透_cbat01的博客-CSDN博客
 

PrinciplesMan
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过时间差来解决鼠标 mousedown/mouseup和click事件的冲突
Coder小何
08-08 4746
今日有一需求： 鼠标按下可以拖动方块移动，松开鼠标方块留在原地，双击鼠标可以改变鼠标样式 首先：鼠标双击（click）事件是通过鼠标按下（mousedown）和鼠标抬起（mouseup）两个动作共同完成的，当我们为一个对象同时绑定这三个事件时，无论绑定的顺序如何，他的执行顺序都是先down然后up 最后click div.onmousedown = function(){ console.log('鼠标按下了！'); } div.onc
拖拽drag时，mouseup与click事件冲突
weixin_44999830的博客
05-23 7838
解决方案： 首先我们可以解决最简单的一种，就是不拖拽的情况下触发只是触发click。 1、按照刚才的说法，mouseup事件后click必定会触发，但是如果没有发生拖拽，也就是没有触发mousemove事件，这种情况比较简单，我们可以用一个变量纪录是否触发mousemove，在mouseup的时候只触发发生拖拽的情况。 2、还有一种比较复杂的情况，就是在发生了拖拽的情况下如何避免click的触发？...
鼠标事件中MouseDown、MouseUp与Click事件有什么区别？
coolheart87的专栏
03-14 1万+
Mouse Down是鼠标按下触发的动作；Mouse Up是鼠标抬起触发的动作；Mouse  Click就是按下又抬起的动作；click是激活,包含了MouseClick,MouseClick是鼠标点击； click不只是鼠标点击,当焦点在该控件上,按回车时也激发此事件，MouseClick应该有鼠标点击坐标属性成员。
mousedown、mousemove、mouseup实现一个可拖拽的div
qq_41260655的博客
04-22 3281
可拖拽的div 前言：前端开发当中不单单是简单的页面布局，很多的事件也应用在其中，比如一个窗口实现在整个页面的拖动的需求。 明确步骤 （1）对div设置position：absolute；属性并设置top：100px；left：100px； （2）监听div的mousedown事件 （3）监听整个页面document的mousemove事件 （4）监听整个页面document的mouseup事件 （5）通过监听事件来拿到clientX和clientY，计算出和按下鼠标位置的xy计算差值，然后赋值给lef
mousedown、mouseup、click
最新发布
AllBluefm的专栏
01-23 1276
一般是用mousedown+mousemove配合做拖拽等，用click做点击，但是如果这两个事件同时存在的时候，执行click的时候会有干扰，因此建议用mousedown+mousemove+mouseup配合，在mouseup中判断是拖拽还是点击，不需要注册click。
[踩坑]vue中mouseup选中文本和click点击事件冲突，阻止冒泡不生效
weixin_44945942的博客
09-13 3564
[踩坑]vue中mouseup选中文本和click点击事件冲突，阻止冒泡不生效
javaScript:结合mousedown、mousemove、mouseup事件，实现拖动方块在页面内移动（代码）
小福气的博客
07-13 1376
效果需求：鼠标长按实现拖拽该方块移动，鼠标松开后将方块停在当前的位置 注意点如下： mousemove、mouseup是全局有效，使用时用document mousemove鼠标移动事件后，通过在mouseup里面设置this.onmousemove=null;即可实现触发鼠标抬起事件onmousemove 记得给点击的对象添加样式position:absolute 代码如下： <style> *{margin: 0;padding: 0;} body{...
JQuery中的常用事件、对象属性与使用方法分析
11-27
3. `.mousedown()/.mouseup()`: 鼠标按钮按下和释放时触发。 4. `.mousemove()`: 鼠标在元素上移动时触发，常用于实现拖动效果。 5. `.mouseover()/.mouseout()`: 鼠标进入或离开元素时触发，但包括子元素。 6. `...
jQuery基于$.ajax设置移动端click超时处理方法
01-19
click｛mousedown->mousemove->mouseup｝ click事件在移动设备上虽然会识别但却是最后一个执行的，所以如果不把click事件换成touchstart事件的话，就可能造成延时导致交互上也慢了几拍 所以在移动端最好把c
JQuery的ON()方法支持的所有事件罗列
01-19
自从jQuery添加了on()和off()方法之后，基本跟事件有关的操作我不会再使用其他诸如$(‘xxx’).click(function(){});之类的了。 不过jQuery的api里面没有说on里面到底可以绑定多少个事件，今天看jQuery1.8.3的源码...
Text.MouseDown.zip
03-31
`MouseUp`事件是在用户释放鼠标按钮时触发的，这与`MouseDown`事件相对应。这两个事件常用于实现点击行为，例如单击或双击。 对于右键点击，我们可以监听`MouseRightButtonDown`和`MouseRightButtonUp`事件。右键...
事件委托与常用事件类型
weixin_49806196的博客
05-23 284
事件代理//委托 将事件绑定到父元素或者祖先元素，当子元素或者后代元素触发事件时，执行事件代理的函数 注：事件处理函数中的this指向是绑定的元素节点 适用场景： 1.多个子元素，绑定相同事件类型、执行同一个事件处理函数 2.子元素是动态 nodeName元素名大写 localName元素名小写 let olEle = document.querySelector("ol"); olEle.addEventListener("click", function (e) { if(e.target.node
js原生拖拽的两种方法
cxu123321的博客
09-04 727
js原生拖拽的两种方法 2018-08-30 11:30:19Muzilh阅读数 12856更多 分类专栏：js 版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_41910848/article/details/82218243 一.mousedown、mo...
阻止click点击事件
热门推荐
sina_panda
04-11 3万+
网上查了后有一下几种实现方法1.css禁用鼠标点击事件.disabled { pointer-events: none; } 注：（这个没有试过）2.直接使用阻止事件的进行 e.stopPropatation||e.cancelBubble = true jquery 禁用a标签 方法1$(document).ready(function() {
转载-解决OnMouseDown OnMouseUp与OnClick事件的冲突问题
weixin_34019144的博客
03-29 3184
2019独角兽企业重金招聘Python工程师标准>>> ...
[js]用mousedown与mousemove配合使用实现拖动效果
春夜喜雨的专栏
08-30 3513
一个在js上实现简单组件拖动小功能的思路，记录下来...
《Android 开发艺术探索》笔记4--View事件分发与滑动冲突
行动者&&职业化
09-07 1947
思维导图View事件分发机制点击事件传递规则事件分发的源码解析View的滑动冲突滑动冲突的解决方式参看文章 思维导图 View事件分发机制 点击事件传递规则 所谓点击事件的事件分发,就是对MotionEvent事件的分发过程,传递给某一个View. 在事件传递中有三个方法是贯穿始终的 dispatchTouchEvent():进行事件的分发 如果事件能传递到View那么此方法一定会被调用,返回值受当前View的onTouchEvent()和下级View的dispatchTouchEvent()的影.
C# BUTTON 触发事件
08-06
在C#中，触发Button的事件可以通过不同的方式实现。其中一种方式是通过在另一个控件的事件中执行Button的事件。例如，可以在Button2的Click事件中执行Button1的Click事件，这样在单击Button2的同时也会单击Button1。示例代码如下： private void button1_Click(object sender, EventArgs e) { // 在此编写要在button1的Click事件中执行的代码 } private void button2_Click(object sender, EventArgs e) { // 在button2的Click事件中执行button1的Click事件 button1_Click(sender, e); // 也可以继续编写后续要执行的代码 } 另一种方式是通过处理TextBox的KeyPress事件来实现。可以在TextBox的KeyPress事件中判断按下的键是否是回车键('\r')，如果是，则将焦点设置到Button上，然后执行Button的Click事件。示例代码如下： private void textBox1_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyChar == '\r') { button1.Focus(); button1_Click(this, new EventArgs()); } } 需要注意的是，点击事件的执行顺序是按照一定的规则确定的。对于Button的点击事件，执行顺序一般为MouseDown -> Click -> MouseClick -> MouseUp。同时，当焦点在该控件上时，按回车键也会触发Click事件。这些都是在控件的相关事件中定义的执行顺序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值