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

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>

有没有另一种方法可以在我的组件中单击鼠标中键调用方法？

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);
}

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