mouseup模拟drag与click事件冲突

最新推荐文章于 2025-07-28 15:13:13 发布

原创最新推荐文章于 2025-07-28 15:13:13 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文描述了一个在Mui框架中出现的bug，当同时存在拖拽与点击事件时，可能会导致两者同时触发的问题。提供了详细的案例及演示Demo。

一个很隐晦的bug,在mui框架里面发现的，mui里面的框架的拖拽事件都是利用mouseup,mouseove,mousedown实现的，但是如果这个时候有click事件就会触发一个拖拽同时触发click的bug。

文章里详细描述了这个问题，有完整 demo可以查看；

mouseup模拟drag与click事件冲突

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

坤坤前端笔记

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

阻止 mousemove 或 touchmove 与 click 事件同时触发

天问博客-专注于大前端技术

10-26

3041

最近做了自己的开源项目 Msw-Tools，参考了 VConsole 工具中按钮的拖拽功能，计划给 MSW 按钮也增加类似的拖拽效果，并兼容PC端和手机端，但是遇到一个问题：一个按钮绑定了多个事件，怎样才能阻止 mousemove 或 touchmove 与 click 事件同时触发。

拖拽drag时，mouseup与click事件冲突

weixin_44999830的博客

05-23

8506

解决方案：首先我们可以解决最简单的一种，就是不拖拽的情况下触发只是触发click。 1、按照刚才的说法，mouseup事件后click必定会触发，但是如果没有发生拖拽，也就是没有触发mousemove事件，这种情况比较简单，我们可以用一个变量纪录是否触发mousemove，在mouseup的时候只触发发生拖拽的情况。 2、还有一种比较复杂的情况，就是在发生了拖拽的情况下如何避免click的触发？...

参与评论您还未登录，请先登录后发表或查看评论

JS中mouseup事件丢失的原因与解决办法

01-19

前言当实现类似Excel选中区域的功能时，经常出现 mouseup 事件丢失的情况，由于缺少了 mouseup 事件，导致一个完整的操作无法进行。如果你是想进行拖拽移动操作，也可以参考本文。原因目前发现两个原因：触发了浏览器的 drag 操作，导致mouseup丢失。由于鼠标离开了操作的区域，触发了mouseleave导致mouseup丢失。解决办法第一种情况通过执行下面的代码阻止系统默认的操作来防止触发 drag 操作： //在事件中 e=e || window.event; pauseEvent(e); //阻止事件冒泡 //不仅仅要stopPropagatio

元素拖拽异常以及与点击事件冲突解决方法

一只小山羊的博客

07-27

3211

一般的拖拽处理方法 <template> <div id="app"> <div class="box" v-drag @click="clickEvent">123</div> </div> </template> <script> export default { name: 'app', directives: { drag: function(el) { let dragBox

拖拽事件与点击事件共同执行

weixin_44134551的博客

03-23

473

先说一下逻辑，拖拽事件分为三个事件触发，touchstart touchmove touchend click事件为两个事件触发touchstart touchend ，如果没有touchmove事件那么为点击事件。 (function($) { var old = $.fn.drag; function Drag(element, options) { this.ver = '1.0'; this.$element = $(element); this.options = $.ex

C# winform 同时支持控件drag和click

narlon - C#+GameDEV

10-27

337

方法会捕获鼠标事件并等待拖拽操作完成。有一个简单地思路解决这个问题。

【百度地图交互设计全攻略】：点击与拖拽事件绑定的5种高级用法

[【百度地图交互设计全攻略】：点击与拖拽事件绑定的5种高级用法](https://img-blog.csdnimg.cn/20210712153056913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9...

事件监听与交互设计：输入法皮肤用户互动逻辑的7种最佳实践

首先介绍了事件监听与交互设计的基础概念，深入分析了事件驱动编程的核心原理及其在输入法交互中的应用。随后，文章探讨了用户行为建模、意图识别与反馈机制，并结合实践部分详细阐述了点击、悬停、拖拽及手势识别等...

Openlayers 地图拖动在麒麟系统，360浏览器可以正常使用，在其他浏览器鼠标抬起事件不触发

05-14

### **步骤 3：排除事件冲突与阻止默认行为** 若代码中存在其他事件监听器（如 `pointerdown` 或 `drag`），可能意外调用了 `event.preventDefault()`，导致后续事件被阻断： ```javascript map.on('pointermove', ...

几何画板自动化测试探索：用AutoIt模拟操作验证稳定性的7种关键场景

本文围绕几何画板自动化测试的关键技术展开研究，基于AutoIt构建GUI自动化测试框架，深入分析其在窗口识别、控件定位及用户行为模拟方面的核心机制，并针对图形绘制、变换动画、度量计算等关键功能设计高保真自动化...

8、JavaScript 中的观察者与发布 - 订阅模式深度解析

最新发布

b0c1d2的博客

07-28

本文深入解析了 JavaScript 中常用的观察者模式和发布 - 订阅模式，介绍了它们的概念、实现方式、优缺点以及适用场景，并通过多个实际示例展示了如何在前端开发中应用这些模式。文章还对比了观察者模式与发布 - 订阅模式的异同，并探讨了中介者模式在复杂组件通信中的作用。最后，文章提供了模式选择建议、性能优化策略以及未来发展趋势，帮助开发者构建松散耦合、可维护和可扩展的 JavaScript 应用。

Drag+Drop和MouseClick

weixin_30606461的博客

06-03

360

项目中的一个树形结节，既要响应拖拽事件、又要响应点击事件。实现的时候没多想，依次实现了tree_MouseClick、tree_MouseDown、tree_MouseMove事件。出现的Bug是，偶尔会点击时不响应。分析下来，应该是触发了MouseMove里的DoDragDrop拖拽事件，因此MouseClick被忽略了。如何正确实现呢？《Drap+Drop and MouseClick》这...

区分拖曳(drag)和点击(click)事件

weixin_30707875的博客

05-25

2212

假设页面上有一个a标签： <a href="http://www.google.com">google</a> 现在需要对这个标签进行拖放操作，会发现当拖曳完成后，该链接也同时被打开了，这并不是期望的结果，因为我们仅仅想将这个标签拖放到另一个位置而已。最初很自然地想到了用preventDefault来阻止默认行为，可实际操作后发现这种方案不可行。由于拖曳...

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突

前端开发

01-11

1万+

功能描述：如图，右侧悬浮菜单按钮，只支持上下方向拖动，点击时展开或关闭菜单。 BUG说明：鼠标上下方向拖拽，如果松开时鼠标位于悬浮按钮上会默认执行click事件，经验证，click事件与mouse事件的执行顺序为onmousedown =》onmouseup =》onclick,意味着在click事件执行时会与与其相关的mouse事件冲突。解决方案：因为click事件执行时间短，所以利...

mouseup 事件丢失的原因和解决办法

热门推荐

偶尔记一下 - mybatis.io

05-12

1万+

说明当实现类似Excel选中区域的功能时，经常出现 mouseup 事件丢失的情况，由于缺少了 mouseup 事件，导致一个完整的操作无法进行。如果你是想进行拖拽移动操作，也可以参考本文。原因目前发现两个原因：触发了浏览器的 drag 操作，导致mouseup丢失。由于鼠标离开了操作的区域，触发了mouseleave导致mouseup丢失。解决办法第一种情况通过执行下面的代码阻止系统默认的操

拖动div时鼠标mouseup事件丢失

深蓝色的忧伤

10-30

7474

拖动div时，总会出现mouseup丢失情况，困扰了很久。原因可能是：当拖动的div中有图片或链接时，如果是点图片或链接开始拖动，拖出窗口时也会导致onmouseup丢失. 解决办法： IE下,可以采用setCapture()方法,在onmousedown时捕获,在onmouseup时释放.用在火狐下可没有这么好用了，网上提供的：mousedown下面加入window.captureEve

[踩坑]vue中mouseup选中文本和click点击事件冲突，阻止冒泡不生效

weixin_44945942的博客

09-13

4671

[踩坑]vue中mouseup选中文本和click点击事件冲突，阻止冒泡不生效

JS如何将拖拉事件与点击事件分离？

小酷陪你玩安卓

05-12

3586

帖子：http://bbs.youkuaiyun.com/topics/390785395?page=1#post-397369340 如何将拖拉事件跟点击事件分离？需要做到：拖拉时不触动点击事件 js拖拽组件1 window.onload = function(){ Dra

阻止mouseup与 click 事件同时触发

12-20

在JavaScript中，当用户点击鼠标并快速抬起（即同时触发click和mouseup事件）时，通常会发生事件冒泡或者默认行为。为了避免这种情况，你可以通过阻止事件的默认行为，或者监听单击事件并在一定时间内检查是否已经发生了其他事件来处理。 1. **阻止默认行为**：使用`event.preventDefault()`可以防止默认的行为（例如链接跳转），这样就无法同时触发click和mouseup事件了。例如： ```javascript element.addEventListener('click', function(event) { if (/* 检查是否已触发mouseup */) { event.preventDefault(); } }); ``` 2. **取消快速连续点击**：另一种方法是在短时间内检测是否有其他鼠标事件发生。如果在特定延迟（如500毫秒）内收到了mouseup事件，则忽略click。这需要维护一个定时器： ```javascript let isClicked = false; const timeoutId = null; element.addEventListener('mousedown', startTimeout); element.addEventListener('mouseup', () => { clearTimeout(timeoutId); isClicked = false; // 重置状态 }); function startTimeout() { timeoutId = setTimeout(() => { if (!isClicked) { isClicked = true; handleClick(); // 触发click处理函数 } }, 500); // 设置延迟时间 } function handleClick() { if (!isClicked) { // 处理click事件 } else { // 防止click事件触发 } } ```