Question

我正在处理一个按钮上的5个事件-touchstart，touchend，mousedown，mouseup和click（假设我正在创建某些内容类似“波纹按钮”）。对于touchstart / mousedown，我正在使用统一处理程序；对于touchend / mouseup，我正在使用统一处理程序。如果没有触摸输入，那么一切都很好。但是当出现触摸事件时，事件堆栈变得太奇怪了：

如果快速单击（称为“触摸”）按钮，则堆栈为：touchstart-> touchend-> mousedown-> {{1} }-> mouseup，因此统一处理程序会触发两次（如预期的那样），但是click事件会触发，这很好。
如果您点击'n'hold然后释放（没有像素移动），则堆栈为：click-> touchstart（确定）。但是，如您所见，没有点击事件（事实上，确实有点击）。

下面截断的代码完全重现了该错误（按设计的方式运行？也许我听不懂？）。请注意，我没有touchend或preventDefault进行任何操作，所有事件均已完全保存其冒泡和默认行为。

实际上，第二种行为更不需要，因为第一种行为是按照规范进行的（基本上，正如MDN所述，这是预期的）。

有什么办法解决此问题（我的意思是，如何为第二个行为返回stopPropagation事件）？

click

class Button extends React.Component {
  handlePressStart = (event) => {
    if (event.targetTouches) {
      console.log("touchstart")
    } else {
      console.log("mousedown")
    }
  }
  
  handlePressEnd = (event) => {
    console.log("doesn't matter which event, pressend")
  }
  
  handleClick = (event) => {
    console.log("click")
  }
  
  render() {
    return (
      <button
        onTouchStart={this.handlePressStart}
        onMouseDown={this.handlePressStart}
        onTouchEnd={this.handlePressEnd}
        onMouseUp={this.handleMouseUp}
        onClick={this.handleClick}
      >
        My awesome button
      </button>
    )
  }
}

ReactDOM.render(<Button />, document.getElementById("kappa"))

奇怪的触摸/单击事件堆栈

0 个答案: