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

时间:2018-04-02 22:55:15

标签: angular

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

3 个答案:

答案 0 :(得分:16)

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

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

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

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

onRightClick() {
    return false;
}

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

答案 1 :(得分:1)

事件名称是“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
}

答案 2 :(得分:0)

@ SEY_91是正确的; contextmenu是你的答案。 angular5 doco落后(参考https://angular.io/guide/user-input

对于您的所有输入,请参阅HTML doco https://developer.mozilla.org/en-US/docs/Web/Events