仅单击元素时如何停止触发onMouseDown？

Question

我正在尝试开发一种游戏，其中的单位（SVG榆木）具有反应性

该单元应通过拖动来移动。 如果仅单击一个窗体，则应将其打开。 当我单击时，会触发mousedown，但不会触发onclick。

class Unit extends Component {
  state = {
     moving:false
  };
  handleClick = (e) =>{
    console.log("Clicked");
  }
  startMove = e => {
    this.setState({moving:true})
  };
  render() {
    return (
          <g className="u-wrapper">
          <g onClick={this.handleClick}
          onMouseDown={this.startMove}>
          {this.createCircle()}
          />
        </g>
        {this.renderRangeCircle()};
      </g>
    );
  }
}

如果仅单击鼠标，则不会触发mouseDown。 可能是触发两者的方法，但先单击onclick

Answer 1

不可能阻止mousedown事件那样触发，因为click事件将始终最后触发。 它是由按下鼠标按钮然后释放后触发的，因此，很明显，在触发click的情况下，您首先总是会发生mousedown事件。

在文档中对此进行了解释：

当在单个元素上按下并释放指针设备按钮（例如，鼠标的主按钮）时，将触发click事件。 如果在一个元素上按下该按钮，然后在另一元素上释放该按钮，则将在包含这两个元素的最特定祖先元素上触发该事件。

单击mousedown和mouseup事件之后，将按此顺序触发。