My webpage works with a lot of data which is uploaded by the user, processed by the server and then returned back. Sometimes, the user will want to filter part of the data so the server would process only a subset of that data. So my webpage has a nice 'filter' button which filters according to the client's state.

Long story short: my clients want to be able to middle-click that button so it opens in a new tab. (Some actually use right-click -> 'open in new tab', so this has to be supported as well)

I'm a big believer in letting the user deciding how to open their links, so I wouldn't want this filter button to open a new window automatically. But I can't turn it into an [a href] link, because I need to run the JS filter first.

So the question becomes, how can I make a link which runs some code before opening?

EDIT: The solutions below which use the mouse click event would fail for users who use right click + open in new tab, which is (it turns out) fairly common among my users. I've updated the question accordingly.

Question author Gilthans | Source



Use a button, capture click event in which you can put your filter logic then open new tab. You can always use css to make it look like either button or link style.

You can see this in how to use mouse middle click.

Answer author Gilthans