长按事件 - 回调函数

一、原理

• setTimeout(function(){},time) ---- 表示 延迟 time毫秒后才执行function；
• clearTimeout(timer) ---- 清除定时器，其中timer：表示你定义的计时器(名称)。
• 监听：addEventListener()
• 回调函数：callback() ---- 放在定义的funName的形参里，而在调用函数的实参中写的是function；调用的时候还是callback()

---

二、长按事件 - 回调函数 实现代码

实现事件:设置一个长按弹出对话框

• html：

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

• css：

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

• javascript：

var div=document.querySelector(".test");//获取div
//封装长按功能的函数
function longpress(el,callback){//形参指(DOM元素，callback回调函数)
    var timer;//定义一个名称用于调用***
    //主逻辑代码***
    el.addEventListener("mousedown",function(){
    timer=setTimeout(function(){
        callback();//调用函数，设置延时器在1秒后才执行
    },1000)
});
    document.addEventListener("mouseup",function(){
        clearTimeout(timer);//当鼠标松开的时立即清除timer定时器
    });//这里的监听对象如果不是document/body/html,而还是el的话---会出现bug***：点击el立即移出el松开鼠标，不能清除定时器，就会执行回调函数。
}
longpress(div,function(){//这里封装需要实现的功能
    alert("哈哈哈哈哈");
});//调用方法---实参也可以是个函数

---

三、效果展示

长按div弹出对话框：

image.png