如何处理 Angular 应用程序中的右键单击事件？

【问题标题】：How to handle right click event in Angular app?如何处理 Angular 应用程序中的右键单击事件？
【发布时间】：2021-03-08 16:40:53
【问题描述】：

在 Angular 中有没有办法捕捉右键单击事件？我看到（单击）和（dblclick），但是当我尝试（右键单击）时，它不会触发任何事件。有没有办法包含右键单击事件，如果它不存在，让它们由类似于 click 和 dblclick 的函数处理？

【问题讨论】：

查看此链接stackblitz.com/edit/angular-bjy6zb?embed=1&file=app/…
Angular 2 right click events?的可能重复

标签： angular

【解决方案1】：

事件名称是 contextmenu。所以，你的 html 模板代码可以是这样的：

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

$event 是一个可选参数，因此您的模板和事件处理程序可以如下所示：

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

onRightClick() {
    return false;
}

注意：您可以返回 false；以避免事件中的默认浏览器操作。

【讨论】：

【解决方案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
}

【讨论】：