In Angular is there a way to catch right click events? I see (click) and (dblclick), but when I try (rightclick) it does not trigger any events. Is there a way to include right click events and have them be handled by a function similar to the click and dblclick if it does not exist?
-
2see this link stackblitz.com/edit/angular-bjy6zb?embed=1&file=app/…SEY_91– SEY_912018-04-02 23:10:25 +00:00Commented Apr 2, 2018 at 23:10
-
Possible duplicate of Angular 2 right click events?Narm– Narm2018-04-03 02:22:49 +00:00Commented Apr 3, 2018 at 2:22
Add a comment
|
3 Answers
The event name is contextmenu. So, your html template code can be something like this:
<div (contextmenu)="onRightClick($event)"></div>
$event is an optional parameter so your template and event handler can look like this:
<div (contextmenu)="onRightClick()"></div>
onRightClick() {
return false;
}
NOTE: You can return false; to avoid default browser action from the event.
Comments
The event name is "contextmenu", so you should use something like this:
<button (contextmenu)="onRightClick($event)"> Right click me </button>
Then the onRightClick function should look something like this:
onRightClick(event) {
event.preventDefault() //this will disable default action of the context menu
//there will be your code for the expected right click action
}
Comments
Do it Angular way with the help of decorator @HostListener
@HostListener('contextmenu')
preventContextMenu() {
return false;
}
This code prevents native browser context menu to be opened within boundaries of component. Thus you can also open your customly created overlay menu within the same method before returning.
Looks clean, doesn't clutter the template.
2 Comments
DannyP
Makes it a little harder to know what exactly was right clicked on though. If you need to pass in the id of what was clicked on that doesn't help either.
Maxime Lyakhov
@DannyP you can place this handler in a directive or in element's component which holds id. Or use vnapastiuk solution on this page.