出错点
监听了双击事件
的同时,也触发了单击事件
,不能达到预想的双击触发双击,单击触发单击的设想
实现
实现双击的同时单击,达到互不影响的效果,原理是设定一个flag
,将其初始值赋false
,当触发单击事件时,延时500ms
(最佳延迟时间)判断flag
是否为true
,若是,则return
(不影响双击事件),若是false
则完成单击的行为。当然了,flag
赋true
是在dblclick
监听时设置的。
代码示例
window.addEventListener('load',function(){
var $flag=false;
$button=document.querySelector('div[class=b] [name=b1]');
$result=document.querySelector('div[class=b] > div[id=result]');
$button.addEventListener('click',_click);
function _click(){
setTimeout(check,500);
$flag=false;
}
function check(){
if($flag==true) return;
$result.innerHTML=parseInt($result.innerHTML)-1;
}
$button.addEventListener('dblclick',_dblclick);
function _dblclick(){
$flag=true;
$result.innerHTML=parseInt($result.innerHTML)+1;
}
})
<div class="b">
<button name="b1">click</button>
<div id="result">0</div>
</div>