CODEWITHSUNDEEP
javascript
crezc3nt
crezc3nt

Reputation: 313

How to make middle mouse button to work normally with preventDefault() in Javascript

I want to open link in new tab with middle mouse button, but I find out that event.preventDefault() stops middle-click from opening a new tab.

I have to use event.preventDefault() because my link is used for trigger a lightbox, but I want user to be able to open this link in new tab with middle mouse button too, how can I do that?

Demo

document.getElementById("test").addEventListener("click", function(e) {
    e.preventDefault();
});
<a id="test" target="_blank" href="//jsbin.com/wemowe">Click</a>

Upvotes: 0

Views: 456

Answers (1)

adeneo
adeneo

Reputation: 318302

You can make it conditional so it doesn't prevent the middle mouse button, which is 2

document.getElementById("test").addEventListener("click", function(e) {
    if ( e.which !== 2 )
         e.preventDefault();
});

A somewhat more cross browser solution supporting older IE as well would be

document.getElementById("test").addEventListener("click", function(e) {
    var evt = (e == null ? event : e), prevented = true;

    if (evt.which) {
        if (evt.which == 2) prevented = false;
    } else if (evt.button) {
        if (evt.button == 4) prevented = false;
    }

    if (prevented) evt.preventDefault();
});

Upvotes: 1

Related Questions