jQuery: Detect Mouse Click and Open Target in New Tab

Question

I'm currently designing a simple forum application. It's mostly powered by jQuery/AJAX and loads everything on the same page; however, I know that sometimes users want to open several topics at once to look at them in new tabs when browsing a forum.

My solution to this was to detect when the middle mouse button is clicked and the left mouse button is clicked, and doing different actions then. I want to load the target with AJAX in the window when the left-mouse button is clicked, otherwise load it in a new tab.

My only problem is I don't know of a way to open a target location in a new tab with jQuery. Obviously opening new tabs at will isn't allowed, but is there a way to assign this type of behavior to a user-generated action?

Thanks!

Nimit Dudani · Accepted Answer · 2011-09-26T12:03:18.860

20

Please take look on sample code. It may help

<script type='text/javascript'>
    jQuery(function($){
        $('a').mousedown(function(event) {
            switch (event.which) {
                case 1:
                    //alert('Left mouse button pressed');
                    $(this).attr('target','_self');
                    break;
                case 2:
                    //alert('Middle mouse button pressed');
                    $(this).attr('target','_blank');
                    break;
                case 3:
                    //alert('Right mouse button pressed');
                    $(this).attr('target','_blank');
                    break;
                default:
                    //alert('You have a strange mouse');
                    $(this).attr('target','_self"');
            }
        });
    });
</script>

edited Sep 26 '11 at 12:03

answered Sep 26 '11 at 11:49

Nimit Dudani

4,840
3
31
46

1

When clicking on the link, would it change the target attribute before the action is executed? – Phillip Sep 26 '11 at 11:50
Yes, I will change attribute before action. – Nimit Dudani Sep 26 '11 at 12:04
i want when user click on link or open it a new tab .the link hiding but by these ways it possible only on IE...what can i do? – amin gholami Sep 29 '15 at 14:32
how bout right click then you choose to open in new window? – tjvg1991 Oct 11 '17 at 06:55

score 10 · Answer 2 · answered Sep 26 '11 at 11:52

10

<a href="some url" target="_newtab">content of the anchor</a>

In javascript you can use

$('#element').mousedown(function(event) {
      if(event.which == 3) { // right click
          window.open('page.html','_newtab');
      }
})

answered Sep 26 '11 at 11:52

Kanishka Panamaldeniya

17,302
31
123
193

Ah I see, didn't know I could set the target attribute on window.open. Will give this a try. Thanks! – Phillip Sep 26 '11 at 11:54

score 7 · Answer 3 · answered Dec 12 '13 at 12:46

You need to also consider that ctrl-click and cmd-click are used to open new tabs (in windows/linux and mac respectively. Therefore, this would be a more complete solution:

jQuery.isClickEventRequestingNewTab = function(clickEvent) {
    return clickEvent.metaKey || clickEvent.ctrlKey || clickEvent.which === 2;
};

Ehtesham · Answer 4 · 2011-09-26T12:04:02.223

1

    $('#element').mousedown(function(event) {
          if(event.which == 3) { // right click
              window.open("newlocation.html","");
          }
    });

See it live http://jsfiddle.net/8CHTm/1/

edited Sep 26 '11 at 12:04

answered Sep 26 '11 at 11:50

Ehtesham

2,967
1
18
20

@Philip I have added a fiddle. – Ehtesham Sep 26 '11 at 12:05

score 0 · Answer 5 · edited May 23 '17 at 12:02

0

The default action of the middle mouse button is to open in a new tab.

You could set the hyperlinks target attribute to _blank to open a new tab.

<a href="#link" target="_blank">Link</a>

You can also refer to this question How to distinguish between left and right mouse click with jQuery

edited May 23 '17 at 12:02

Community

1
1

answered Sep 26 '11 at 11:45

CoderHulk

23
1
5

I need to edit my question and make it more clear. I'm looking to load the target with AJAX on left-click, and open in a new tab on middle-mouse click. – Phillip Sep 26 '11 at 11:47

score -1 · Answer 6 · answered Nov 27 '14 at 08:25

-1

Please try "_newTab" instead of "_blank"

window.open( URL , "_newtab");

answered Nov 27 '14 at 08:25

Mitul

3,431
2
22
35

jQuery: Detect Mouse Click and Open Target in New Tab

6 Answers6

Linked