出错点
监听了双击事件的同时,也触发了单击事件,不能达到预想的双击触发双击,单击触发单击的设想
实现
实现双击的同时单击,达到互不影响的效果,原理是设定一个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>