h5 长按弹窗_移动端H5模拟长按行为

需求： 点击编辑, 长按删除

环境： 移动端H5

思路： 使用touchstart事件 + touchend事件 + setTimeout定时器模拟原生长按事件， 在touchstart中记录开始时间并开启一个定时器，一段时间(长按行为时间)后，在setTimeout中执行删除逻辑，在touchend中记录结束时间并清除定时器，之后比对开始时间和结束时间，如果时间差小于长按行为时间，则执行编辑逻辑。

示例代码：

let timer = null; //定时器

let startTime = 0; //行为起始时间

let endTime = 0; //行为结束时间

let btn = document.querySelector('.option_btn') ; // 获取按钮元素

btn.addEventListener('touchstart', ()=>{  //监听touchstart事件

startTime = Date.now(); //获取行为开始时间

setTimeout( () => {

//执行删除逻辑

}, 500) // 假设长按时间为500毫秒

})

btn.addEventListener('touchend', ()=>{  //监听touchend事件

endTime = Date.now(); //获取行为结束时间

clearTimeout(timer); //清除定时器，此时阻止了删除逻辑的触发

if(endTime - startTime < 500) { //如果行为时常小于长按，则执行编辑逻辑

//执行编辑逻辑

}

})