← Home

Behavior of links created using Javascript

Most of the times, I find my self binding the anchor elements such that when they are clicked I open some window using Javascript i.e. some thing like the following:


// <a href="#" class="someLink">Some Link</a>
 
$('.someLink').on('click', function () {
    window.location = 'http://somelink.com/';
});

Of course it works, but the problem with this approach is, CTRL + click which is normally used to open the link in the the new tab/window turns out opening the link in the same window and thus poor user experience. So to avoid this i.e. forcing it to open the link in the new tab instead of the current tab, you may want to modify your event as following:


$('.someLink').on('click', function(e) {
 
    if(e.metaKey || e.ctrlKey || e.button === 1) {
        window.open('http://somelink.com/');
    }
    else {
        window.location = 'http://somelink.com/';
    }
 
});

It’s a little check and can greatly improve the user experience.

Liked it? Follow me on twitter@kamranahmedseandtweet about it

Subscribe yourself

You can subscribe to my blog posts by providing your email below. Your email will be kept safe and there will be no spamming ..Promise!