Попытка использовать event.stopPropagation () для разделения событий мыши и касания в React. - PullRequest
Новая
       31

Попытка использовать event.stopPropagation () для разделения событий мыши и касания в React.

1 голос
/ 28 февраля 2020

Я пытаюсь создать верхнее навигационное меню, используя response-popper и Reaction-router-dom.

В верхней части навигации у меня есть MenuItems, которые при наведении курсора или касании сенсорного экрана разверните с помощью компонента popper, чтобы отобразить элементы вспомогательной навигации. Вы можете быть перенаправлены только на другую страницу с помощью дополнительных элементов навигации. Это его текущее состояние

. Я хочу, чтобы пользователи мыши могли сразу же перенаправлять их через сам элемент MenuItem, если они это сделают sh. Но так как пользователи телефона / планшета не имеют этого состояния при наведении, я хочу, чтобы они не перенаправляли из MenuItem и все же просто расширяли опции sub nav.

Я решил попробовать использовать event.stopPropagation (), чтобы разделить эти два обработчика событий. Но событие onTouchStart на вложенном div все еще всплывает и вызывает событие click. 

  handleClick = () => {
    console.log("handleClick")
  }

  handleTouch = (event) => {
    console.log("handleTouch")
    event.stopPropagation();
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.setState({
        hover: true
      })
    }, 150)
  }

  render() {
    const config = this.props.config

    return (
      <div
        onClick={this.handleClick}
        onMouseOver={this.handleClick}
        onFocus={this.handleClick}
      > <a href={config.href === '/' ? config.href : null} >
          <Manager>
            <Target style={{ position: 'relative' }}>
              <div onTouchStart={this.handleTouch}>
                {this.display(config, this.state.hover)}
              </div>
            </Target>
          </Manager>
        </a>
      </div>
    )
  }

Я также пытался 

  componentDidMount() {
    document.addEventListener('click', (event) => {
      event.stopPropagation();
    }, false)
  }

, поскольку кто-то сказал, что события уже всплывают вверх от документа и обходит любой другой stopPropagate (), но там тоже не повезло.

...