javascript - 当鼠标单击该项目时阻止 onClick()

Question

我显示了一个 Node 组件。

<Node key={props.id} {...props} onClick={()=>console.log('Clicked')}>
  {props.label}
</Node>

我需要节点在单击时打印“Clicked”，但是，当我从节点单击并拖动到任何地方时拖动时，我想防止节点打印“Clicked”。现在它仍然打印“Clicked.- 我使用了 stopPropogation()、preventDefault() 但没有任何效果。

我在onWindowsMo​​useUp方法中处理它；全局水平；显示.js；显示类使用Node

   componentDidMount() {
    ...
    window.addEventListener('mousemove', this.onWindowMouseMove);
    window.addEventListener('mouseup', this.onWindowMouseUp, true);
  }

   ... 


  onWindowMouseUp(e) {
    if (this.mouseInProgress) {
      e.stopPropagation();
      e.preventDefault();
    }
    this.mousePoint = null;
    this.mouseInProgress = false;
  }

鼠标进行中

onWindowMouseMove(e: PointerEvent) {
    if (!this.mouseInProgress) {
      const distance = geometry.getDistance((this.mousePoint: any), mousePoint);
      if (distance < GraphVisualization.MINIMUM_PAN_DISTANCE) {
        return;
      }
      this.mouseInProgress = true;
    }
    ...

Answer 1

在此示例中，我将事件监听器附加到节点。基本上，它只会在鼠标单击并释放节点时打印单击，而无需在其间移动。

您现在只需要向 mouseMove 添加最小距离逻辑就可以了。

<Node onmouseup="handleMouseUp" onmousedown="handleMouseDown" ></Node>

window.addEventListener('mousemove', mouseMove);

function handleMouseUp() {
    if(this.mouseMoved) console.log("clicked")
    this.mouseMoved = false
    this.mouseDown = false
}

function mouseDown() {
     this.mouseDown = true
}
function mouseMove(){
    if(this.mouseDown)this.mouseMoved = true
}