如何在Angular应用中处理右键点击事件？

Question

在Angular中是否有捕获右键点击事件的方法？我看到了(click)和(dblclick)，但是当我尝试使用(rightclick)时，它并没有触发任何事件。是否有一种方法可以包括右键点击事件，并让它们由一个类似于click和dblclick的函数处理（如果存在）？

- Rolando

---

请查看此链接 https://stackblitz.com/edit/angular-bjy6zb?embed=1&file=app/app.component.ts&hideExplorer=1&hideNavigation=1 - SEY_91

可能是 Angular 2右键点击事件？ 的重复。 - Narm

Answer 1

事件名称是 contextmenu。因此，你的 HTML 模板代码可以像这样：

<div (contextmenu)="onRightClick($event)"></div>

$event 是一个可选参数，因此您的模板和事件处理程序可以像这样：

<div (contextmenu)="onRightClick()"></div>

onRightClick() {
    return false;
}

注意：你可以返回false；来避免事件的默认浏览器动作。

- Zzz

Answer 2

事件名称为"contextmenu"，因此您应该使用类似以下的代码：

<button (contextmenu)="onRightClick($event)"> Right click me </button>

那么onRightClick函数应该长这样：

onRightClick(event) {
 event.preventDefault() //this will disable default action of the context menu
 //there will be your code for the expected right click action
}

- vnapastiuk

Answer 3

使用装饰器@HostListener，按照Angular的方式进行操作

@HostListener('contextmenu')
preventContextMenu() {
    return false;
}

这段代码可防止在组件范围内打开本地浏览器上下文菜单。 因此，您也可以在返回之前使用相同的方法打开自定义创建的覆盖菜单。

看起来简洁，不会使模板混乱。

- Maxime Lyakhov