Window.open With _blank Opens Two Tabs In Firefox

When this element is middle clicked: This handler is called and when it gets to window.open, two tabs are opened. The first is the URL (variable URL) which is desired. The second

Solution 1:

I guess your goal here is to intercept the user trying to open a link in a new tab and instead open a different link in a new tab. If I'm correct, then you're going to need to adjust your strategy in a few key ways:

1. Don't use mousedown

   Click events are triggered by a mouse-down followed by a mouse-up event. That means that normally you have to press and release the button before any click-type thing happens, whether that's navigation (left-click), context menu (right-click) or open in new tab (middle-click). If you try to simulate this using mousedown, it's gonna feel weird - the action will happen too soon!

   Also, as you've now observed, it won't work correctly: the corresponding click event will still happen after your handler runs, because you're not cancelling the right event. What does your preventDefault() / return false accomplish? Well, try holding the middle button down and dragging: most browser will probably pan around the view as you move your mouse, but if you try this on your "Middle Click Me" element... Nothing happens. Yep, you've only succeeded in making your page slightly more annoying to scroll around on.

2. DO use the auxclick event.

   I'm guessing you went with mousedown in the first place because you observed that nothing fired for a middle click when you captured the click event. A few years ago, click would've worked fine - but now, click only fires for the primary mouse button. This is a good thing! Way too many people inadvertently blocked right- and middle-clicks by capturing click, when they only intended to capture left-clicks. Presumably if you're capturing auxclick, you know what you're doing and can be trusted to handle it properly. (so, y'know... Do be careful)

The w3c actually has rather good documentation on all of this, so I'd be remiss if I didn't link to it and quote the relevant bits here:

The click event should only be fired for the primary pointer button (i.e., when button value is 0, buttons value is 1). Secondary buttons (like the middle or right button on a standard mouse) MUST NOT fire click events. See auxclick for a corresponding event that is associated with the non-primary buttons.

The click event MAY be preceded by the mousedown and mouseup events on the same element, disregarding changes between other node types (e.g., text nodes). Depending upon the environment configuration, the click event MAY be dispatched if one or more of the event types mouseover, mousemove, and mouseout occur between the press and release of the pointing device button. The click event MAY also be followed by the dblclick event.

Finally, here's your snippet with the changes above, for your review (you can't actually test it here, since window.open is blocked in Snippets - but you'll get an error indicating this and not see any tabs open; paste it into your fiddle for a real test):

// Allow middle button click to open client in another tab.
$(document).on('auxclick', '.clientlist-edit', function (event) {
    if (event.which === 2) {
        event.preventDefault();

        var url = $(this).attr('href');
        url = url.toLowerCase().replace('/addedit', '/clientindex');
        window.open(url, '_blank');

        returnfalse;
    }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><aclass="clientlist-edit"href="/Clients/Management/AddEdit/4ffac190-72d2-476a-b0be-a9d90097272a"><iclass="glyphicon glyphicon-pencil"></i>&nbsp;<strongclass="title">Client Name</strong></a>

Yep - the only change is mousedown -> auxclick! Enjoy...

Further reading

• Middle button click event
• UI Events - event type click - W3C Editor's Draft
• Element: auxclick event on MDN