You already correctly figured out that it cannot work the way you want. You need an idea, right? Here is it: therefore, you need to modify your design. This way, you can combine both kinds of behavior you need.
One of the different possible solutions could be this: on your <a> element, you can handle the event "contextmenu". In the handler of this event, you can implement some custom context menu, or some equivalent behavior that gives the user the opportunity to choose one of alternative actions. At the same time, if the user simply activates the anchor, the navigation will load a new page according to a href value, and, if the user holds Shift key — in a new tab.
Let's assume for simplicity that the page has only one <a> element:
<a href="https://stackoverflow.com">Stack overflow</a>
Then it could be set up like this:
const anchor = document.querySelector("a"); // or more complicated selector
anchor.addEventListener("contextmenu", event => {
// activate menu or something, depending on event.target
});
One of the options in this custom context menu could provide the optional side effect you want. One option may be navigation to the page according to anchor's href, but with the call to your side-effect function.
How to implement a custom menu behavior? This is a separate question. I personally have such a component so I can share it. Or you can implement something, depending on what you want.
Another alternative could be a composite control that has two inner elements: <a>, to provide navigation to the page according to href, in a separate tab or not, and another one to provide the choice of action, not necessarily simulating the behavior of a context menu.
You decide.
