通过setTimeout处理click，dblclick，mousedown等事件的冲突

最新推荐文章于 2024-03-26 14:48:09 发布
最新推荐文章于 2024-03-26 14:48:09 发布
阅读量489 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000009555401
版权 
之前做项目遇到同一个dom上要同时绑定单击和mousedown事件， 然后就发现冲突了，总是先执行mousedown事件，click时间不会被执行。因为想要click的时候必然先mousedown，所以……
后来通过setTimeout解决了此冲突，简单总结demo如下：
    
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div{
        width:100px;
        height:100px;
        background:green;
    }
</style>
<body>
    <div class="demo"></div>
</body>
</html>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var down=null;
        var mouse=false;
        $('.demo').mousedown(function(){
            clearTimeout(down);
            down=setTimeout(function(){
                mouse=true;
                console.log('鼠标按下了');
            },200);
        });
        $('.demo').click(function(){
            clearTimeout(down);//要清除down事件，否则在执行了click事件之后，会接着执行mousedown事件
            if(!mouse){
                console.log('被点击了');
            }else{
                mouse=false;
            }
        });
    });
</script>
weixin_33919941
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js不完美解决click和dblclick事件冲突问题
10-28
总结起来，解决`click`和`dblclick`事件冲突的关键在于区分这两种事件的执行顺序，并通过延迟或取消操作来避免它们之间的干扰。然而，由于系统设置的差异，这种解决方案可能无法在所有情况下都完全有效。在设计交互...
原生js解决dblclick双击和mousedown，mouseup鼠标按下抬起冲突问题
爱吃香菜君的博客
05-26 2518
最近在开发项目中遇到这么一条需求，canvas画布上实现图形的拖拽以及双击结束多边形画图的功能。但是遇到了鼠标事件冲突的问题。参考网上demo最后确定的实现思路是，使用setTimeout方法。判断一下延迟250ms后是否鼠标按下了一次。若按下了一次，则是mousedown事件，大于1次则是dblclick事件。 mousedown (event) { if (event.button === 0)//判断左右鼠标中键 0为左键 2为右键 {
mousedown、click冲突
最新发布
weixin_53419732的博客
03-26 354
写项目时遇到的一个需求，这里记录一下，简单说一下功能，需要一个img图片，可拖动，可点击跳转，但是mousedown得优先级高于ckick，不多说了下面这直接上代码。好了，到这里，图片拖动，点击就完成了。有不足之处希望多多指正。这里两个时间都会生效了，但是新的问题，如何区分开两个事件，百度了很多，最后还是用setTimeout，去做时间差异，如下图。最开始是上图这么写的，但是运行后发现，不行，同时绑定没生效，于是做了下面的调整。好了，事件的解决了，接下来就该，拖动的了，话不多说直接贴图。
解决mousedown单击和dbclick双击冲突（不用定时器，用时间差）
weixin_49256675的博客
07-10 1074
问题说明 有时候同一个元素需要绑定单击和双击事件。比如单击负责调出菜单，双击负责调出本地文件。。。绑定单击事件可以用mousedown或者click，绑定双击事件则是用dbclick。 解决（计算时间差） 在网上搜索的方法大都是利用setTimeout定时器解决的，单击时会延迟设定的毫秒数再执行单击的代码。 如果想要单击和双击都==立即响应==，可以试试下面手动==计算时间差==的方法：
关于setTimeout传参的问题
06-08 655
错误：在前面传参的话好像只接受字符串;所以这样传参会报错；function ajax(fn){ setTimeout((fn)=&gt;{ console.log('你好') fn() },1000)};ajax(function (){ console.log('end')});正确：直接上代码,传参要用第三个参数,function ajax(fn){ setTimeout(()=&gt;{...
js 刷新当前页面_js性能优化 -- 防抖和节流
weixin_39834090的博客
11-21 284
前段时间接触到了 JS 中 防抖和节流 ，一开始还不明白他们的意思及应用场景，可后来才知道，这是前端中最基础的性能优化。在绑定 scroll 、resize 这类事件时，当它发生时，它触发的频次非常高，间隔很近。如果事件中涉及到大量的 位置计算、DOM 操作、元素重绘 等工作且这些工作无法在下一个事件触发前完成，就会造成浏览器丢帧。持续触发这类事件导致丢帧扩大、浏览器 CPU 使用率增加、用户体验...
js解决事件冲突
11-08
4. **取消默认行为**：使用`preventDefault()`方法可以阻止事件的默认行为，这对于处理像`submit`、`click`等具有默认动作的事件非常有用。 #### 实现细节 为了有效地解决事件冲突问题，可以通过设置标志变量来...
jQuery防止click双击多次提交及传递动态函数或多参数
10-26
在jQuery中，双击事件（dblclick）会触发两次单击事件（click），具体来说，当用户执行双击事件时，会依次触发mousedown、mouseout、click、mousedown、mouseout、click、dblclick这一系列事件。可以看到，双击事件...
基于jquery实现的鼠标左中右键单双击及拖拽和滚轮事件插件原型
03-02
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨如何基于jQuery实现一个功能丰富的鼠标事件插件，包括左键、中键、右键的单击、双击...
js常用方法（js常用鼠标事件和其对应的方法）
10-08
在JavaScript中，处理用户交互的常见方式之一是利用鼠标事件。以下是一些JS常用的鼠标事件及其对应的方法： 1. `click`：当用户点击元素时触发。常用于按钮、链接等交互元素。 2. `dblclick`：双击元素时触发，通常...
js 中的SetTimeOut()
u010450065的专栏
10-31 3982
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTi
jquery定时器：setTimeout()、setTimeout() 重复点击触发多次
weixin_46507548的博客
07-05 4215
出现下图这种情况是因为上一次定时器还没结束，就被点击触发下一次，所以多次累计重复了。 因为问题出现在“多次初始化定时器”，那就要在每次初始化定时器之前先执行清除操作，保证只有一个定时器在执行，就不会出现这样的问题了。 例如： var btn = document.querySelector('button'); var time; btn.addEventListener('click', function() { clearInterval(time); //清除之
从setTimeout，onclick传参看js函数作为参数
目尽地平线
09-14 1223
函数作为另一个函数的参数时，就要小心：是传入函数对象，而不是函数调用后的结果
EasyClick setTimeout()使用
Mr、老鬼的博客/https://laoguicom.top/doc/2/
03-29 826
EasyClick setTimeout()使用
详解setTimeout()
热门推荐
Moments
01-30 3万+
前言：看了这篇文章，1.注意setTimeout引用的是全部变量还是局部变量了，当直接调用外部函数方法时，实际上函数内部的变量已经变成全局。2.提醒我防止出错的，用匿名函数不容易出错。3.setTimeout最快执行时间是4毫秒。4.使用setTimeout的函数会比当前队列的函数慢执行，在他们的后面。5.setTimeout中的定时器并不是准确的时间，实际中它需要在执行完前面的函数后才定时执行。 你还可以查阅关于setTimeout的相关介绍 JavaScript提供定时执行代码的功能，叫做定时器（tim
setTimeout用法——避免重复性触发操作
浪浪荡荡我的人生
10-30 2457
btn的click事件，每次点击都会执行给定的function，如果function复杂的话，很容易消耗内存 解决方法——setTimeout延时处理。 给function做延迟处理，比如600毫秒后执行，如果在600毫秒内再次触发方法，则将之前的timeout清除。 关键代码： let isr = false let timer = null let oBtn = document.getElementById('oBtn') oBtn.onclick = function ()
小程序实现点击/单击，长按，双击事件及setTimeout函数使用
Julse的博客
01-10 3407
tap 手指触摸后马上离开 longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替） ps：longtap 是先触发长按，后触发单击 我们也可以根据触摸时常需要自行区分长按和单击 bindtouchstart='touch...
click事件多次点击 settimeout只执行一次
07-08
您好！关于您的问题，可能是因为多次点击触发了多个`setTimeout`函数，但是只有一个`setTimeout`函数会被执行。这是因为`setTimeout`函数会在指定的延迟时间后执行一次指定的函数，而不是每次点击都执行。 如果您希望每次点击都执行`setTimeout`函数，您可以尝试在点击事件中取消之前的`setTimeout`函数，并重新设置一个新的`setTimeout`函数。这样可以确保每次点击都会执行`setTimeout`函数。 以下是一个示例代码： ```javascript var timeoutId; function clickHandler() { if (timeoutId) { clearTimeout(timeoutId); // 取消之前的 setTimeout } timeoutId = setTimeout(function() { // 执行需要延迟执行的代码 console.log("Delayed code"); }, 1000); // 延迟时间为 1 秒 } // 绑定点击事件 document.getElementById("myButton").addEventListener("click", clickHandler); ``` 在上述示例中，每次点击事件触发时，会先取消之前的`setTimeout`函数（如果存在的话），然后重新设置一个新的`setTimeout`函数来延迟执行需要延迟执行的代码，这样可以确保每次点击都会执行延迟代码。 希望能解决您的问题！如果您有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值