首页 > 其他分享 >如何避免 `click` 和 `mousedown` 事件之间的冲突

如何避免 `click` 和 `mousedown` 事件之间的冲突

时间:2024-06-24 10:42:17浏览次数:23  
标签:ball ignoreClick isDragging mousedown 冲突 click 事件

Genie

你好!为了避免 clickmousedown 事件之间的冲突,可以通过检查拖拽的状态来决定是否应触发 click 事件。我们可以设置一个简单的延迟,并使用一个标志位来确定是否应该忽略 click 事件。

下面是修改后的代码:

<script>
    const { remote, ipcRenderer } = require('electron');
    const ball = document.getElementById('ball');

    let isDragging = false;
    let ignoreClick = false;

    ball.addEventListener('mousedown', (e) => {
        isDragging = true;
        ignoreClick = false; // 重置 click 忽略标志

        // 设置一个延迟,如果在此期间未发生 mouseup,则认为是拖动
        setTimeout(() => {
            if (isDragging) {
                ignoreClick = true;
            }
        }, 200); // 延迟时间可以根据需要调整
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            const [mouseX, mouseY] = [e.screenX, e.screenY];
            ipcRenderer.send('float-ball-move', { x: mouseX - 25, y: mouseY - 25 });
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
    });

    ball.addEventListener('click', (e) => {
        if (ignoreClick) {
            return; // 忽略拖动时触发的 click 事件
        }

        if (ball.style.backgroundColor === 'red') {
            ball.style.backgroundColor = 'green';
            ipcRenderer.send('toggle-state', 'green');
        } else {
            ball.style.backgroundColor = 'red';
            ipcRenderer.send('toggle-state', 'red');
        }
    });
</script>

要点总结:

  1. 使用一个 ignoreClick 标志来决定是否处理 click 事件。
  2. mousedown 事件中重置该标志,并设置定时器,以便在一段时间后更新 ignoreClick 状态。
  3. 如果在这段时间内发生了足够的移动(即正在拖动),则会设置 ignoreClicktrue,从而忽略随后的 click 事件。

希望这样能帮你解决问题!如果有任何其他问题,请随时告诉我。

标签:ball,ignoreClick,isDragging,mousedown,冲突,click,事件
From: https://www.cnblogs.com/rotk2022/p/18264542

相关文章

  • 详解 ClickHouse 的分片集群
    一、简介分片功能依赖于Distributed表引擎,Distributed表引擎本身不存储数据,有点类似于MyCat之于MySql,成为一种中间件,通过分布式逻辑表来写入、分发、路由来操作多台节点不同分片的分布式数据ClickHouse进行分片集群的目的是解决数据的横向扩容,通过分片把一份完整......
  • 详解 ClickHouse 的副本机制
    一、简介副本功能只支持MergeTreeFamily的表引擎,参考文档:https://clickhouse.tech/docs/en/engines/table-engines/mergetree-family/replication/ClickHouse副本的目的主要是保障数据的高可用性,即使一台ClickHouse节点宕机,那么也可以从其他服务器获得相同的数据......
  • 详解 ClickHouse 的表引擎
    一、简介表引擎决定了如何存储表的数据。包括:数据的存储方式和位置,写到哪里以及从哪里读取数据支持哪些查询以及如何支持并发数据访问索引的使用(如果存在)是否可以执行多线程请求数据复制参数表引擎的使用方式:必须显式在创建表时定义该表使用的引擎,以及引擎使用的相关......
  • 【计算机网络仿真】b站湖科大教书匠思科Packet Tracer——实验3 总线型以太网的特性(广
    一、实验目的1.验证总线型以太网的特性;2.验证广播特性;3.验证各主机对总线的竞争使用以及可能产生的碰撞。二、实验要求1.使用CiscoPacketTracer仿真平台;2.观看B站湖科大教书匠仿真实验视频,完成对应实验。三、实验内容1.构建网络拓扑;2.配置网络设备;3.跟踪并查看......
  • ClickHouse 入门基本介绍
    一、简介官网:clickhouse.techClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库(DBMS),使用C++语言编写,主要用于在线分析处理查询(OLAP),能够使用SQL查询实时生成分析数据报告。OLAP:联机分析处理,以ClickHouse等分析型数据库为代表,适合对数据进行一次插入多......
  • easyexcel和poi版本冲突报错深入解析v2
    easyexcel报错解决问题项目由poi改用easyexcel,报错如下:java.lang.NoSuchMethodError:‘org.apache.poi.ss.usermodel.CellTypeorg.apache.poi.ss.usermodel.Cell.getCellType()’原因easyexcel中的poi和项目原本的poi版本冲突问题。由于之前做过easyexcel项目,就把......
  • onclick、onserverclick、onclientclick
    原文链接:https://blog.csdn.net/HiLiu_/article/details/134539854第一部分:onclick、onserverclickHTML控件,如input还有a标签,只有onclick( 客户端)和onserverclick(服务端)事件,而没有onclientclick事件。(一).onclick(客户端)事件(注意不加runat="server")<inputtype="button......
  • click事件生成
    click事件生成和attachInfo传递click事件生成(onClick调用)在Android开发中经常用到click事件监听,但其实click事件并不是地方传上来的事件,底层上报事件都是touch事件,而click事件其实是根据touch事件生成的,或者说click事件并不是一个纯粹的事件在View的onTouchEvent方法中,在收到Motio......
  • python watchdog检测到文件产生,动态创建进程,不指定进程数去处理,处理过程中需要写文件,
    如果希望在检测到文件时动态创建进程而不预先指定进程数,并确保写文件时不发生冲突,可以使用队列和锁的机制。以下是一个改进的方案:pythonfrommultiprocessingimportProcess,Queue,Lockfromwatchdog.observersimportObserverfromwatchdog.eventsimportFileSystemE......
  • java:【@ComponentScan】和【@SpringBootApplication】扫包范围的冲突
    #代码结构如下:注意【com.chz.myBean.branch】和【com.chz.myBean.main】这两个包是没有生重叠的。主程序【MyBeanTest1、MyBeanTest2、MyBeanTest3】这两个类是在包【com.chz.myBean.main】下#示例代码【pom.xml】<dependency><groupId>org.springframework.bo......