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

Question

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

Answer 1

事件名称是contextmenu.所以,你的html模板代码可以是这样的:

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

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

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

onRightClick() {
    return false;
}

注意:您可以返回false; 避免事件的默认浏览器操作.

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
}

Answer 3

在装饰器@HostListener的帮助下以 Angular 方式完成

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

此代码阻止在组件边界内打开本机浏览器上下文菜单。因此，您还可以在返回之前在同一方法中打开自定义创建的覆盖菜单。

看起来很干净，不会使模板混乱。