移动端长按文字弹出菜单操作

Question

移动端长按文字弹出菜单操作，有没有什么思路~
从何下手

Answer 1

我们项目中用react封装的长按组件，你可以参考下：

import React, { PureComponent } from 'react'

const LONG_TOUCH_DURATION = 500
const MAX_MOVE = 5

export interface Props {
  children: any,
  onLongTouch: () => void
}

export default class LongTouch extends PureComponent<Props> {
  private touchTimer: Number | null = null
  private touchX = 0
  private touchY = 0

  public onTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
    const { pageX, pageY } = e.touches[0]
    this.touchX = pageX
    this.touchY = pageY
    this.touchTimer = Date.now()
  }

  public onTouchEnd = (e: React.TouchEvent<HTMLDivElement>) => {
    const touchDuration = Date.now() - (this.touchTimer as number)
    const { pageX, pageY } = e.changedTouches[0]
    const { onLongTouch } = this.props
    const { touchX, touchY } = this
    const isMove =
      pageX - touchX > MAX_MOVE ||
      touchX - pageX > MAX_MOVE ||
      pageY - touchY > MAX_MOVE ||
      touchY - pageY > MAX_MOVE
    if (touchDuration > LONG_TOUCH_DURATION && onLongTouch && !isMove) {
      onLongTouch()
    }
  }

  public render() {
    return (
      <div
        onTouchStart={this.onTouchStart}
        onTouchEnd={this.onTouchEnd}
        onTouchCancel={this.onTouchEnd}
      >
        {this.props.children}
      </div>
    )
  }
}

使用

<LongTouch onLongTouch={()=>{//xxx}}>
  <div style="width: 200px; height: 200px; border: 1px solid red;"></div>
</LongTouch>

你可以在onLongTouch里面再把坐标或者事件传出去，之后用tooltip组件或者其他的，基本就是监听 TouchStart 事件和 TouchEnd 事件, 然后对比时间，逻辑很简单