javascript - React onClick 和 onTouchStart 同时触发

Question

我的 React 应用程序中有一个 div，我需要处理点击和触摸。但是，当我点击手机时，它会触发这两个事件。

如果我在移动设备上滑动或点击普通浏览器，它工作正常，在每种情况下只触发一个事件。

如何处理这个点击问题而不触发这两个事件？

<div
  className={myClasses}
  onClick={this.myHandle}
  onTouchStart={this.myHandle}
  >&nbsp;
</div>

Answer 1

有一个定义的事件触发顺序(source):

touchstart
Zero or more touchmove events, depending on movement of the finger(s)
touchend
mousemove
mousedown
mouseup
click

如果你想阻止 click 事件，如果之前触发了触摸事件，你可以在 touchend< 中使用 event.preventDefault()/ event handler以防止触发 click 事件。

function App() {
  const handleClick = () => {
    alert('click');
  };

  const handleTouchEnd = (event) => {
    alert('touchend');

    event.preventDefault();
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      onTouchEnd={handleTouchEnd}
    >
      Click Me
    </button>
  );
}

然而，这并不是普遍适用的。例如，您不能 prevent click 事件，方法是在 mousedown 事件中使用 event.preventDefault()。如果您正在寻找解决方案(虽然不确定此用例何时适用)，您将不得不使用 ref相反:

function App() {
  const prevent = React.useRef(false);

  const handleClick = () => {
    if (!prevent.current) {
      alert('click');
    } else {
      prevent.current = false;
    }
  };

  const handleMouseDown = () => {
    prevent.current = true;

    alert('mousedown');
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      onMouseDown={handleMouseDown}
    >
      Click Me
    </button>
  );
}