双击单击易忽视的问题

Posted by Alex Kinhoom on November 23, 2017

出错点

监听了双击事件的同时,也触发了单击事件,不能达到预想的双击触发双击,单击触发单击的设想

实现

实现双击的同时单击,达到互不影响的效果,原理是设定一个flag,将其初始值赋false,当触发单击事件时,延时500ms(最佳延迟时间)判断flag是否为true,若是,则return(不影响双击事件),若是false则完成单击的行为。当然了,flagtrue是在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>