Prevent onClick() when the mouse gets clicked on the item

Question

There is a Node component I display.

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

I need Node to print "Clicked" when it was clicked however, I want to prevent Node from printinting "Clicked" when I'm dragging while clicking from Node and dragging to anywhere. Now it's still printing "Clicked. - I used stopPropogation(), preventDefault() but nothing worked.

I handle it in onWindowsMouseUp method; Global Level; Display.js; Display class uses 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;
    }
    ...

You could use an eventlistener onmouseup on the node. Then only print 'clicked' when the mousemove hasn't been activated before. — Dirk V, May 04 '20 at 22:26
Can you illustrate how do you setup the value of `this.mouseInProgress`? — Ahmed Hammad, May 04 '20 at 22:27
There are edges and layers so I would do it in this scope; But could you elaborate more? @DirkV — merry-go-round, May 04 '20 at 22:27
@AhmedHammad ^ I just added the setup part. Please check above. Thanks — merry-go-round, May 04 '20 at 22:29
@hellofanengineer How confident are you that the condition `(distance < GraphVisualization.MINIMUM_PAN_DISTANCE)` will be false at some point of the mouse movement, so that `this.mouseInProgress` can get a `true` value? — Ahmed Hammad, May 04 '20 at 22:35
very confident; Not; I don't think that's related to the problem — merry-go-round, May 04 '20 at 22:40

score 1 · Answer 1 · answered May 04 '20 at 22:40

1

In this example I attached the event listener to the node. Basically it will only print clicked when the the mouse clicks and releases the node without movement in between.

You now just need to add the minimum distance logic to mouseMove and it should be fine.

<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
}

answered May 04 '20 at 22:40

Dirk V

1,373
12
24

Actually we don't know if we want to do `console.log("clicked")` or anything else; This is a library; – merry-go-round May 04 '20 at 22:44
So I want to do something like `if(!this.mouseMoved){e.preventFromDefault);` so that all the inherited action get stopped. – merry-go-round May 04 '20 at 22:45
I know it's difficult to understand; This seems really complex to me;;; Let me know if you have any more question – merry-go-round May 04 '20 at 22:45
1

So basically you want the node to be unable to execute it's action by letting the window listener stopping the mouse up event? – Dirk V May 04 '20 at 22:51
EXACTLY; Do you think it's possible? – merry-go-round May 04 '20 at 22:51
@hellofanengineer i'm not sure. Usually it's to like prevent a default action to happen like pressing a link. But I don't know if the window itself can block the events of all the elements of the page. – Dirk V May 04 '20 at 23:08
@hellofanengineer I found an example on stack. Basically you'll need to add an event listener to the Node with prevent default to be able to prevent it's click behavior. Window can't prevent the events of all elements. https://stackoverflow.com/a/20085658/4051258 – Dirk V May 05 '20 at 09:06

Prevent onClick() when the mouse gets clicked on the item

1 Answers1