当鼠标在项目上被点击时,防止onClick()。

问题描述 投票:0回答:1

有一个Node组件,我需要Node在被点击时打印 "Clicked"。

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

我需要Node在被点击时打印 "Clicked",但是,我想防止Node在我从Node点击并拖动到任何地方时打印 "Clicked"。现在它仍然在打印 "Clicked"。- 我使用了stopPropogation()和preventDefault(),但没有任何效果。

我在onWindowsMouseUp方法中进行了处理;全局级别;Display.js;Display类使用了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;
  }

MouseInProgress

onWindowMouseMove(e: PointerEvent) {
    if (!this.mouseInProgress) {
      const distance = geometry.getDistance((this.mousePoint: any), mousePoint);
      if (distance < GraphVisualization.MINIMUM_PAN_DISTANCE) {
        return;
      }
      this.mouseInProgress = true;
    }
    ...
javascript
1个回答
1
投票

在这个例子中,我把事件监听器连接到节点上,基本上只有当鼠标点击并释放节点时,它才会打印 "Clicked"。基本上,它只会在鼠标点击和释放节点时打印 "Clicked",而不会在中间移动。

现在你只需要给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
}
© www.soinside.com 2019 - 2024. All rights reserved.