1

我正在尝试使用 react-popper 和 react-router-dom 创建一个顶部导航菜单。

沿着顶部导航，我有 MenuItems，当悬停在或点击触摸屏时，会使用弹出器组件展开以显示子导航项。您只能通过子导航项被重定向到另一个页面。这就是它的当前状态

我想要实现的是鼠标用户能够通过 MenuItem 本身立即重定向，如果他们愿意的话。但是由于手机/平板电脑用户没有那种悬停状态，我希望他们不要从 MenuItem 重定向并且仍然只是展开子导航选项。

我决定尝试使用 event.stopPropagation() 来分离这两个事件处理程序。但是嵌套 div 上的 onTouchStart 事件仍在冒泡并触发 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()，但那里也没有运气。

4

0 回答 0