JavaScript to Control Middle/Right Click URL of HREF

Question

I have a link and want to redirect them with JavaScript to another URL. I have it working for left click, but not when the user Middle-Click or Right-Click -> Open in New Tab/Window. How would I get this to work for middle/right click flows?

Codepen doesn't display the href behavior very well http://codepen.io/anon/pen/OyeGqv

$('a').on('click', function(e) { e.preventDefault(); window.location.href = 'http://www.google.ca'; //does not work for middle/right click }); <a href="#">link</a>

I have tried listening to the mousedown event instead of click, but I was only able to re-direct the current window. The new window/tab that opened returned the incorrect URL of # instead of www.google.ca.

gaetanoM · Accepted Answer · 2015-11-27T22:03:48.920

3

The solution is to avoid to listen for the click event and listen instead on these other events:

$('a').on("contextmenu", function(e) {
  $(this).attr('href', 'http://www.google.ca')
});

$('a').on("mouseup", function(e) {
  $(this).attr('href', 'http://www.google.ca')
});

$('a').on('mouseout', function(e) {
  $(this).attr('href', '#')
});

If instead you want to disable the right and middle click and execute them like the left click it is enough to remove the context menu at all.

edited Nov 27 '15 at 22:03

answered Nov 27 '15 at 21:02

gaetanoM

39,803
6
34
52

You should use .attr for attributes and .prop for properties (typically boolean). href is an attribute, so you should change your code. Granted, your code will work, but it violates best practices. http://stackoverflow.com/questions/18189858/should-href-be-set-with-prop-or-attr – Stan Shaw Nov 27 '15 at 21:04
@gaemaf It works for right-click but not middle click. Any chance your solution can incorporate middle click? – Jon Nov 27 '15 at 21:53
for the middle click I immagine you have to listen on the mouseup event repeating what I did for the context menu. You are right the context menu is only the right button, but I do not have a middle button so I apologize for my lack. But I am sure you can repeat the event contextmenu at the same way for the mouseup, of course the test on the which attribute must be different. Thanks you so much. – gaetanoM Nov 27 '15 at 21:59
Middle-click and Left-click are both `mouseup` events :( – Jon Nov 27 '15 at 22:06

score 1 · Answer 2 · answered Nov 27 '15 at 21:01

1

I have tried listening to the mousedown event instead of click, but I was only able to re-direct the current window. The new window/tab that opened returned the incorrect URL of # instead of www.google.ca.

If that's the only thing stopping it from working perfectly, you can simply replace the href hashtag with a proper URL (and it's a better practice anyway). You'd still be intercepting clicks, of course.

So, something like this:

$('a').on('mousedown', function(e) {
    e.preventDefault();
    window.location.href = 'http://www.google.ca'; //does not work for middle/right click
});
<a href="http://www.google.ca">link</a>

If the links are dynamic, you can update the href in the callback.

answered Nov 27 '15 at 21:01

Shomz

36,161
3
52
81

I agree that replacing the HREF hashtag with the correct URL is the better practice. However, in my case, I am not allowed to update the HREF in anyway. – Jon Nov 27 '15 at 21:05
I can't. In my case, I cannot change the DOM structure in any way. – Jon Nov 27 '15 at 21:08
In that case, you have to block the right click behaviour using the contextmenu event, but I'm not sure if you can make it work for the middle-click for all the browsers. – Shomz Nov 27 '15 at 21:09
Hmm.. I'm going to start investigating e.which to detect middle-click – Jon Nov 27 '15 at 22:12

md84h · Answer 3 · 2018-01-26T14:10:56.160

0

event.which will be useful for your case, where event.which is equals to 1,2,3 for left, middle, right respectively. So now your code will be something like this.

$('a').mousedown(function(e) {
    e.preventDefault();
    if(e.which == 2 || e.which == 3)
    window.location.href = 'http://www.google.ca'; 
});

edited Jan 26 '18 at 14:10

answered Nov 27 '15 at 20:44

md84h

3
2

Because that is taking left click consideration only. It is not detecting which mouse button is clicked. You have to detect the button and then proceed on that basis. – md84h Nov 27 '15 at 20:57
Um, his code has no conditionals so it fires on ANY mousedown event, while your goes through the conditional first. – Shomz Nov 27 '15 at 20:59
Wouldn't this code fire on a right-click, preventing the right-click menu from ever popping, making it impossible for a user to click "open in new tab"? – Stan Shaw Nov 27 '15 at 21:02
1

@md84h This solution does not work for me because middle/right click would only force the current window to Google. The new window that spawns still opens in #. – Jon Nov 27 '15 at 21:03
just added one more line of e.preventDefault(); to prevent default action. – md84h Jan 26 '18 at 14:11

JavaScript to Control Middle/Right Click URL of HREF

3 Answers3