Prevent router navigating to href - aurelia

Question

I have a link with a route-href attribute pointing to one of my routes. This all works fine:
<a route-href="route: item; params.bind: {id: item.id}">${item.name}</a>
I've now created my own custom attribute route-popup which opens the route in a fixed overlay using <compose>, this too works fine:
<a route-popup="route: item; params.bind: {id: item.id}">${item.name}</a>
However, in order for users to be able to Ctrl+click and open items in new windows, I would like to use both route-href and route-popup on the link:
<a route-href="route: item; params.bind: {id: item.id}" route-popup="route: item; params.bind: {id: item.id}">${item.name}</a>
And then from my RoutePopupCustomAttribute class simply preventDefault() so that the route-href (or href it creates) is suppressed:
this.onClick = e => {
e.preventDefault();
e.stopPropagation();
this.ea.publish('route-popup:open', {route: this.route, params: this.params});
return false;
};
However, neither preventDefault, stopPropagation or returning false from my callback seems to work. Aurelia still follows the href and renders the new page.
How can I prevent the router from navigating to the route-href?
Edit: Ok so this is a little weird, I set up a gist.run to further explain the problem, however, on gist.run it actually does work :/ All that's needed is e.preventDefault(). The only difference in my code is that I'm using pushState: true in the router config, so I'm guessing that's it?
https://gist.run/?id=daf226363df8cdc777be718bff3a4f76
Yup, after further testing it turns out that when you use pushState: true it's not possible to preventDefault() whereas if you use hashChange: true it is.