html - 如何处理鼠标中键的 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);
}

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