jquery解决同时绑定单双击事件的冲突（详解）

不爱你很难

成绩

假设给一个jquery获得的工具同时绑订单击战单击变乱，那末正在触收单击变乱的同时肯定会触收两次单击变乱。（以下图所示）

<body>
<button>面击</button>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$('button').click(function () { console.log('单击') });
$('button').dblclick(function () { console.log('单击') });
</script>
</body>

复造代码

以下别离是单击战单击时掌握台挨印的成果

’

打点思路

第一步：正在单击变乱里设置一个按时器去施行变乱内乱容，而且正在每次单击变乱施行的第一步拂拭按时器（相似撙节的写法）。那一步保证正在单击的工夫第一次单击的内乱容没有会被施行。
第两步：正在单击变乱的第一步拂拭按时器，如许便保证了第两次单击内乱容也没有会被施行，而只要单击变乱施行。
代码完成：

<body>
<button>面击</button>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$('button').click(function () { console.log('单击') });
$('button').dblclick(function () { console.log('单击') });
</script>
</body>

复造代码

以下为单击时掌握台挨印的成果

详解和留意事项

接下去分离上里的例子对道理停止更进一步阐明
当施行单击变乱时，此时第一次单击变乱会天生一个按时器，临时称为按时器1。（以下图）

当正在等候工夫内乱再次面击触收面击变乱。此时触收第两次单击变乱战一次单击变乱。（以下图）由最后已停止处置的代码挨印成果（2个单击+1个单击）可知施行挨次是先单击后单击。以是会先施行第两次单击变乱，同时拂拭按时器1，并天生按时器2。以后动身触收单击变乱，拂拭按时器2。
因而，“单击”没有会再挨印，而只要“单击”挨印。

但假设两次单击变乱的隔绝距离超越了按时器的等候时少会发作甚么？(以下图所示)正在第两次单击时，第一次按时器曾经完毕了等候，也便是道第两次单击变乱中浑空的按时器1是曾经施行完了的。以后触收第一次单击变乱，拂拭按时器2。终极成果便是“单击”挨印了1次，“单击”挨印了1次

潜伏的成绩

以是综上所述，为了确保按时器1能被拂拭，需求正在保证按时器的等候工夫充足少（200ms是一个靠近临界的挑选），但那也意味着单击变乱的施行会有一个基于按时器的提早。正在某些对提早请求下的场所下，本文供给的办法一定是一个劣解。

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

jquery解决同时绑定单双击事件的冲突（详解）

浏览过的版块