Question

我有一个图标，用作打开URL的链接。当用户单击该链接时，我需要进行API调用和其他一些操作。

现在使用鼠标左键以及Ctrl +单击可以很好地触发方法。仅当单击鼠标中键打开链接时，该方法才会被触发。

<a [href]="'somelink.com' + someVariable" target="_blank" (click)="someMethod('some', 'params')">
    <div class="some-icon">
        <img src="/assets/icon/icon.svg" height="54" alt="Icon" />
    </div>
</a>

是否有另一种方法可以在单击鼠标中键时在Component中调用方法？

Answer 1

对于辅助鼠标按钮，您可以处理auxclick事件。在以下示例中，click事件由主鼠标按钮触发，而auxclick事件由其他鼠标按钮触发。

<a (click)="onClick($event)" (auxclick)="onAuxClick($event)">...</a>

onClick(event: MouseEvent) {
  console.log("click - button", event.button, event.which);
}

onAuxClick(event: MouseEvent) {
  console.log("auxclick - button", event.button, event.which);
}

有关演示，请参见this stackblitz。请注意，相同的方法可以处理两个事件。我在演示中调用了不同的方法以显示要处理的事件。

Answer 2

检查一下：

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which

这是实现

(click)="$event.which == 2 ? yourFunction($event) : $event.preventDefault()"

preventDefault（）用于停止事件。

如何处理鼠标中键的Angular（单击）事件？

2 个答案: