美文网首页
H5移动端模拟长按事件

H5移动端模拟长按事件

作者: 指尖跳动 | 来源:发表于2020-12-30 16:51 被阅读0次

这是我做react项目的时候写的,其他框架稍作改动即可。

<button onTouchStart=  {this.handelTouchStart.bind(this)}
             onTouchMove={this.handelTouchMove.bind(this)}
             onTouchEnd={this.handelTouchEnd.bind(this)}>
</button>
    handelTouchStart(e) {
        const { target } = e;
        const { touches: [touch] } = e;
        target.touchX = touch.clientX;
        target.touchY = touch.clientY;
        target.touchT = Date.now();
        target.longTapTick = setTimeout(() => {
            console.log('长按了。。。');
        }, 3000);
    }

    handelTouchMove(e) {
        const { target } = e;
        const { touches: [touch] } = e;
        const   { clientX: x,  clientY: y } = touch;
        if (Math.abs(y - target.touchY) > 10 || Math.abs(x - target.touchX) > 10) {
            clearTimeout(target.longTapTick);
        }
    }

    handelTouchEnd(e) {
        const { target } = e;
        clearTimeout(target.longTapTick);
    }

相关文章

网友评论

      本文标题:H5移动端模拟长按事件

      本文链接:https://www.haomeiwen.com/subject/gebhoktx.html