javascript - react 停止该元素上的其他事件

Question

我有一个音量元素，当用户将鼠标悬停在它上面时会显示音量条。这一切在桌面上都很好用。然而，要在移动设备上获得相同的功能，用户必须点击音量元素，这也会切换静音点击事件。

我想在用户点击(即点击)移动设备上的该元素时停止该静音事件。

我不想修改 Mute 或 VolumeBar 类来解决这个问题，因为这些是我的库中开发人员使用的通用类。

https://jsfiddle.net/jwm6k66c/2145/

• 实际:静音点击事件被触发，音量条打开。
• 预期:静音点击事件不会被触发并且音量条打开。

打开控制台 -> 进入移动 View (CTRL + SHIFT + M 在 chrome 上) -> 单击音量按钮并观察控制台日志。

我尝试过的:

当音量条的高度为 0(即不可见)时，使用 volumeControlOnClick 停止传播，但这不会取消 onClick。

我想要的:

如果用户第一次在移动设备上点击音量图标，取消静音点击事件。相反，它应该只显示音量条。

const volumeControlOnClick = (e) => {
  const volumeBarContainer =
    e.currentTarget.nextElementSibling.querySelector('.jp-volume-bar-container');
  /* Stop propogation is for mobiles to stop
    triggering mute when showing volume bar */
  if (volumeBarContainer.clientHeight === 0) {
    e.stopPropagation();
    console.log("stop propogation")
  }
};

class Volume extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
    render() {
    return (
        <div className="jp-volume-container">
        <Mute onTouchStart={volumeControlOnClick}><i className="fa fa-volume-up" /></Mute>
        <div className="jp-volume-controls">
          <div className="jp-volume-bar-container">
            <VolumeBar />
          </div>
         </div>
       </div>
    );
  }
};

class Mute extends React.Component {
    render() {
    return (
      <button className="jp-mute" onClick={() => console.log("mute toggled")} onTouchStart={this.props.onTouchStart}>
        {this.props.children}
      </button>
    );
  }
};

class VolumeBar extends React.Component {
    render() {
    return (
        <div className="jp-volume-bar" onClick={() => console.log("bar moved")}>
        {this.props.children}
      </div>
    );
  }
};

React.render(<Volume />, document.getElementById('container'));

Answer 1

这是我最终得到的结果。它之所以有效，是因为如果它是触摸事件，则总是在 onClick 之前调用 onTouchStart，如果不是，则无论如何都会调用自定义逻辑。它也会在悬停发生之前触发。这保留了 :hover 事件。 e.preventDefault() 没有。

let isVolumeBarVisible;

const onTouchStartMute = e => (
  isVolumeBarVisible = e.currentTarget.nextElementSibling
    .querySelector('.jp-volume-bar-container').clientHeight > 0
);

const onClickMute = () => () => {
  if (isVolumeBarVisible !== false) {
    // Do custom mute logic
  }
  isVolumeBarVisible = undefined;
};

<Mute
  aria-haspopup onTouchStart={onTouchStartMute}
  onClick={onClickMute}
>
  <i className="fa">{/* Icon set in css*/}</i>
</Mute>