I have an icon that acts as a link to open an URL. When a user clicks on that link I need to make an API call and some other actions.
Now clicking with the left button aswell as Ctrl + Click triggers the method fine. Only when opening the link with the middle mouse click, the method gets not fired.
<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>
Is there another way to call a method in my Component on middle click?
For secondary mouse buttons, you can handle the auxclick event. In the following example, the click event is triggered by the primary mouse button, and the auxclick event is triggered by the other mouse buttons.
<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);
}
See this stackblitz for a demo. Please note that the same method can handle both events. I call different methods in the demo to show which event is handled.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments