How can I open webpage in new tab with javascript and middle click

Question

I have a anchor inside a list item

<li>
    <a href="page"></a>
    <span>description</span>
    <span>count</span>
</li>

Using javascript, whenever the list item is clicked, the window opens the anchor's href.

I want to let the browser know that when it middle clicks it can treat the list item the same as the anchor, and open in a new tab.

I've looked around and seen that most people think this cannot be done, but I think my situation could be different. One way of looking at it would be not to explicitly tell the browser to open a new tab, rather tell the browser to do what is does when middle click is used.

What do you think?

EDIT: Updated html for a more accurate description. The anchor is not the only element in the list

I don't understand the question... Do you want a default behavior ? Then just use links and 0 javascript... (maybe i don't undertand because english is not my natural language...) — Vinze, Jan 23 '12 at 10:08
Thanks, the anchor is not the only element in the list item. There is some description text in there to, which is not semantically a link, but for UX I would like the user to be able to treat it as a link. — Matt Votsikas McLean, Jan 23 '12 at 11:05
that's no reason to not be able to wrap everything in an `` element. — zzzzBov, Jan 23 '12 at 16:15
possible duplicate of [How can I simulate a click to an anchor tag?](http://stackoverflow.com/questions/1421584/how-can-i-simulate-a-click-to-an-anchor-tag) — gilly3, Jan 24 '12 at 21:10

score 1 · Accepted Answer · answered Jan 24 '12 at 20:50

1

Ok nay sayers :), I've figured out how to do it.

With JS/jQuery I can determine which button is pressed. Using this I can change the target value on the anchor to "_blank" only when the middle button is pressed.

answered Jan 24 '12 at 20:50

Matt Votsikas McLean

874
13
28

How are you triggering the click, with the `.click()` method? Older versions of FireFox don't support the `.click()` method. – gilly3 Jan 24 '12 at 21:08

score 0 · Answer 2 · answered Aug 25 '21 at 14:49

_blank wasn't working for me in Chrome V92. Instead - A workaround will be to create a "fake" <a tag that will work only for middle clicks, like this:

<li>
    <a href="https://google.com" id="fake-link" >
        Only clicks with middle buttons will work
    </a>
</li>
<script>
     document.getElementById('fake-link').addEventListener("click",(e) => e.preventDefault());
</script>

score 0 · Answer 3 · answered Jan 23 '12 at 10:04

0

You want the list item to function as a link. The simplest, most reliable way to do this is to get rid of the JavaScript and apply CSS to make the link fill the list item. Then any click on the list item will hit the link first. Listamatic has many examples.

answered Jan 23 '12 at 10:04

Quentin

914,110
126
1,211
1,335

Thanks, I've updated the html for a more accurate description. The link is not the only element in the list – Matt Votsikas McLean Jan 23 '12 at 11:02

score 0 · Answer 4 · answered Jan 24 '12 at 20:58

Using jQuery 1.7

$('ul').on('click', 'li', function(e){
    if(e.which == 2){
        var newWindow = $(this).find('a').attr('href');
        window.open(newWindow, 'newWindow');
        e.preventDefault();
    }
});

That's it. jQuery normalizes the event.button to event.which so you can reliably detect middle clicks. Then just open a new window. Granted, whether or not it ends up in a new tab or a new windows entirely rests on the users' browser preferences.

How can I open webpage in new tab with javascript and middle click

4 Answers4