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

之前做项目遇到同一个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>

通过setTimeout处理click，dblclick，mousedown等事件的冲突相关推荐

不同dom的blur事件和click事件发生冲突
直接上测试代码 <!DOCTYPE html> <html lang="en"> <head><title>不同dom的blur事件 ...
移动端为何不使用click而模拟tap事件及解决方案
移动端为何不使用click而模拟tap事件及解决方案参考文章: (1)移动端为何不使用click而模拟tap事件及解决方案 (2)https://www.cnblogs.com/ranyonsue/ ...
JS中解决单击双击事件的冲突
当一个元素上即绑定了单击事件又绑定了双击事件,双击元素时会先触发单击事件,没有达到我们理想的效果从而影响了用户体验. 解决方法: // 解决同一个元素使用单击双击事件的冲突 // 解决思路:单击事件后 ...
better-scroll 与fastclick点击事件相冲突
better-scroll 点击事件与fastclick点击事件相冲突导致图片点击无反应 import BScroll from 'better-scroll' export default { ...
javascript event click/dblclick left/right区分左键、右键、双击事件，排除点击事件与拖拽事件冲突，做防抖优化
/*** 函数防抖(目标时间段内,目标函数只执行最后一次)* @param {*} func 目标函数* @param {*} wait 目标时间段* @param {*} immediate 是否立 ...
解决click和dblclick事件的冲突
问题描述一个dom上同时绑定了click事件和dblclick事件,click事件可以正常使用,但是dblclick事件在执行时会先执行click事件,导致dblclick事件不能按照预想的方式执行 ...
click事件在什么时候出发_剖析setTimeout和click点击事件的触发顺序
下面是一段非常简单的JavaScript代码 dianji setTimeout(function () { alert('timer handler') }, 2000) function test ...
leaflet鼠标点击事件click和dblclick，并解决两者冲突问题（示例代码010）
第010个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet中给marker添加鼠标事件,这里用到了click和dblclick. 在双击marker时,会执行两次单击函数和一次双 ...
vue给同一元素绑定单击click和双击事件dblclick，双击事件dblclick无效不触发解决办法
有时vue项目中无论是v-ondblclick:还是@dblclick ,有时会无效果.解决办法直接上代码自己看. .native主要用于监听组件根元素的原生事件 @dblclick.native= ...

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

通过setTimeout处理click，dblclick，mousedown等事件的冲突相关推荐

最新文章

热门文章