移动端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) { //如果行为时常小于长按，则执行编辑逻辑

        //执行编辑逻辑

    }

})