How can I cancel click event when the mouse is moved in Angular?

  angular, mouseevent, onclick, select

I have been trying for some time this, but I am not able to make it work.

I have an element with a (click) method associated:

<span class="item-name" (click)="onClickElement(element.id)">{{element.name}}</span>

Which Navigates to another page:

onClickElement( id: number){    
    if(id){
      this.router.navigate(['/some-url', id]);
    }
  }

This works as expected, but if the user wants to select the text inside element.name to make a copy of the text, if he clicks just over it and moves the mouse to select, when he release the button will be forwarded to the page. Making him go back and having to reload the table where it is located. Which makes it quiet annoying for the user.

I have tried without success adding $event to the (click) method but I was not able to find anything to make this "cancelation" of the action, as for example with stopPropagation.

I also saw some other bindings (mouseup) and (mousedown), which maybe could each one be doing some calculation of the coordinates where you click to see if the mouse has been moved, but his looks really dirty as it probably needs a lot of lines of code and multiple functions to achieve this, leaving also the HTML quiet "full".

Is there something I can do in the onClickElement method to prevent this issue?

Example of the issue, where if you click outside there is no redirection, but if you click inside and drag it is forwarded (white screen meaning the next page):
example

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.