Question

我有一个可滚动的图像网格，常规点击/点击链接缩放视图，并执行长按链接到菜单项网格。

问题在于，当您在重定向后长按一次单击寄存器并将在与启动长按的位置相同的位置选择菜单项。这可以通过preventDefault()修复，然后禁用滚动图像网格的功能。

我认为stopPropagation()会在那里修复，但无济于事。

此问题仅发生在移动浏览器上（此处的目标是当前iOS设备上的chrome）。在桌面浏览器上工作得很好。

class LongPress extends Component {
  constructor(props) {
    super(props);

    this.state = { timeout: null }

    this.handleLongpressCancel = this.handleLongpressCancel.bind(this);
    this.handleLongpressTimer = this.handleLongpressTimer.bind(this);
  }

  handleLongpressTimer(e) {
    e.persist();  // omitted code that relies on this to keep event obj
    e.stopPropagation();
    e.preventDefault();

    this.setState({
      timeout: setTimeout(() => {
        // navigate to menu grid
      }, 500)
    })
  }

  handleLongpressCancel(_e) {
    clearTimeout(this.state.timeout);
  }

  render() {
    return (
      <div
        ref={el => { this.wrapper = findDOMNode(el) }}
        onMouseDown={this.handleLongpressTimer}
        onTouchStart={this.handleLongpressTimer}
        onMouseUp={this.handleLongpressCancel}
        onTouchEnd={this.handleLongpressCancel}
        onTouchMove={this.handleLongpressCancel}
      >
        { this.props.children }
      </div>
    );
  }
}

以下是使用LongPress组件的位置以及允许滚动的样式。

...

render() {
    const wrapperStyles = {
      height: '100%',
      overflowY: 'scroll',
      display: 'flex',
      flexWrap: 'wrap',
      alignContent: 'center',
      alignItems: 'center',
    }

     return (
      <div style={wrapperStyles}>
        <LongPress
          styles={{ margin: 'auto', position: 'relative' }}
          ref={el => { this.imageGrid = findDOMNode(el) }}
        >
          { images }
        </LongPress>
      </div>
     );
   }
 }

preventDefault禁用包装元素滚动（移动）

0 个答案: