2、react使用原生js模拟长按操作

2020-3-15

首先先认识几个DOM元素的api

touchstart：手指触摸到一个 DOM 元素时触发。

touchend：手指从一个 DOM 元素上移开时触发。

touchmove：手指在一个 DOM 元素上滑动时触发。

我们可以结合使用touchstart和touchend，来模拟长按的操作。

思路是，在触发touchstart时设置一个定时器setInterval(longPress(),500)，指定时间后执行长按的操作（如500ms），在执行完长按的操作和触发touchend之后清除定时器。

这样一来，如果没有超过500ms，手指离开屏幕，触发touchend，则longPress不会执行。如果时间时间超过500ms，则longPress执行一次。

完整代码

 import React, { Component } from 'react';


var flag = 0

class MainContainer extends Component {

    _touchStart = (e) => {

        // 设置定时器
        flag = setInterval(this.longPress, 500)

    }

    _touchEnd = (e) => {
        // 这里执行点击的操作，长按和点击互不影响
        if (flag) {
            clearInterval(flag)
            flag = 0
            this.onClick()
        }
    }

    longPress = (item) => {
        console.log('长按');
        clearInterval(flag)
        flag = 0
    }

    onClick = () => {
        console.log('点击');

    }

    render() {
        return (
            <div style={{ touchAction: 'pan-y' }}>
                <div style={{ height: '50px', width: '200px', border: '1px solid', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                    onTouchStart={(e) => this._touchStart(e)}
                    onTouchEnd={(e) => { this._touchEnd(e) }}
                >
                    长按 / 点击
                    </div>

            </div >
        );
    }
}

export default MainContainer;