1

I want to handle clicks on specific elements myself. So that if I click it with the left mousebutton it opens the link in the current tab and if I click it with the middlebutton, it opens it in a new tab. I want to do this by getting the href attribute from the link and use window.open()

Is this even possible without running into popupblocker issues?

So for starters I tried to prevent the opening of the link.

HTML: 

<a href="somelink.php" class="prev_cl"><img src="someimg.png" /></a>

Javascript:

$(function() {
    $('.prev_cl').on('mousedown', function(e){
        return false;
    });
})

But even this isn't working, it still opens the link. If I put an alert before "return false" it actually doesn't trigger the click and shows the alertbox. But who wants an alert box everytime they click a link?

I also tried using both mouseup and mousedown events, but that didn't work either

Another thing I tried was putting the return false to the element itself, meaning:

 <a href="somelink.php" onclick="return false" class="prev_cl"><img src="someimg.png" /></a>

Then on the javascript part I added window.open() to it

But 1) clicking with middlemousebutton still works and 2) Firefox blocks the opening of the window because it thinks it is a popup

Drencrom
  • 31
  • 7

2 Answers2

0

Put your handler on the click event, not mousedown.

$(function() {
    $('.prev_cl').on({
        'click': function(e){
           if (e.which == 1) {
                var button = "left";
            } else {
                button = "middle";
            }
            console.log(button+" click");
            console.log(e.which);
            e.preventDefault();
        },
        'contextmenu': function(e) {
            console.log("right click");
            console.log(e.which);
            e.preventDefault();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="somelink.php" class="prev_cl"><img src="someimg.png" /></a>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Even if this would work, I need to distinguish(or it would be nice to) between left click and middleclick. Afaik this is not possible with 'click' or am I wrong? – Drencrom Sep 20 '14 at 18:15
  • You can use the `contextmenu` event to handle right click. I'm still working on the middle button. – Barmar Sep 20 '14 at 18:29
  • I don't have a mouse with a middle button, so I'm not sure if my answer really works. It might be necessary to use `mousedown` to catch the middle button if `click` doesn't trigger for it. It should just check for `e.which == 2` for that case. – Barmar Sep 20 '14 at 18:40
  • well thats my initial problem, that return false or preventdefault() on mousedown is not working – Drencrom Sep 20 '14 at 18:51
  • When you click on something, multiple events are triggered: `mousedown` and `mouseup` for any click, `click` for left-click, `contextmenu` for right-click, I'm not sure what for middle-click. Following the link or displaying the menu comes from the `click` and `contextmenu` events, so you need to handle those events and prevent their defaults to override. – Barmar Sep 20 '14 at 18:54
0

event.preventDefault() of jQuery can be used to prevent the default action of an event, in this case the click.

http://api.jquery.com/event.preventdefault

Also, you can catch middle (or any) mouse button like this: Jquery: detect if middle or right mouse button is clicked, if so, do this:

Community
  • 1
  • 1
Harshadewa
  • 21
  • 6