JavaScript Redirects and window.open

By  on  

One of the sweet parts in the simplified HTML5 spec was allowing A elements to wrap DIVs and other block level elements.  For too long we added JavaScript listeners and window.location redirects when a wrapping A would have probably sufficed.  But there are also times when the wrapping A wouldn't work -- for example, a block with A elements already within it -- you just want clicks on anything else within the parent to land at a given location.

Of course a basic listener like this would work:

someElement.addEventListener('click', function(e) {
	// not important what the URL is but assume it's available on
	// the element in a `data-src` attribute
	window.location = someElement.get('data-url');
});

...but it would succumb to one of my biggest pet peeves:  COMMAND+CLICK'ing a block and the link opening in the same window.  The closer we can get custom-coded blocks to native browser functionality the better.  So take a moment and fix your event listener callbacks:

someElement.addEventListener('click', function(e) {
	var url = someElement.get('data-url');

	if(e.metaKey || e.ctrlKey || e.button === 1) {
		window.open(url);
	}
	else {
		window.location = url;
	}
});

I've implemented this on my blog and it's something I keep in mind whenever I use a window.location redirect.  It's a minimal code addition but a major usability boost!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

Discussion

  1. Peter Galiba

    Or maybe just put a link there. You can put block elements inside links, and you can make links block elements.

  2. This is an excellent step in the right direction (I hate that too), but is there an equivalent for long-pressing on mobile?

  3. I think so: window.location redirect will give us usability boost. Thanks…

  4. Przyb

    But it will still suck on mobile. Would be nice if we could fix this with html5 context menu, shame for no support in WebKit http://davidwalsh.name/html5-context-menu

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!