双击事件

一、原理

• 1、布尔值
• 2、setTimeout()

---

二、实现代码

html:

<div class="test"></div>

css:

.test{width: 200px;height: 200px;border: 1px solid #000000;}

JavaScript:

function twoClick(el,callback){
    var isClick = false;//先定义一个布尔值 *** 
    el.addEventListener("click",function(){//添加点击事件
        if(isClick == true){//设置第二次点击生效
            callback();
            isClick = false;//双击生效后立即 变false 并且清除定时器
            clearTimeout(tt);
        }else{
            isClick = true;//设置第一次点击变 true
            var tt = setTimeout(function(){//会提前声明到 if 作用域 被 if 的 clearTimeout(tt) 清除
                isClick = false;//设置定时器，在300毫秒后 isClick变成false
            },300);
        }
    })
}//封装函数
//执行代码
twoClick(div,function(){
    console.log("点我干嘛！")
})

---

三、效果

双击div ， 控制台输出："点我干嘛！"