qves3w
Last Updated: February 25, 2016
·
1.354K
· dpashkevich
D42a7264714dee5006b9c99d2567a320

Please check your click handler

Many people today use these...

Apple mouse

...and these

MacBook Air Touchpad

and forget that middle click exists!

Middle click

Middle click* on links = productive

In case you didn't know, this opens the link in a new background tab in any modern browser, how cool is that? You can keep reading the current page without disruptions but open the links you're interested in to check them later.

[*] As an alternative, most browsers support <kbd>Ctrl/Cmd/Shift</kbd>+click

Don't break them!

Every now and then I come across a website that decides to intercept the middle click to perform some custom action or even programmatically make it act like left click ("normal click"), i.e. navigate to another page.

Please don't do this! A user typically does not expect the middle click to be hijacked by a website or an app. The negative effects of this vary from a minor inconvenience to a great frustration from the lost form data that the person had been carefully entering when he decided to open something in a background tab.

Broken example (jsFiddle)

But nobody really does that!

Really? Check your code. Some libraries/frameworks may provide sane defaults, but jQuery doesn't, for instance.

In fact, Coderwall does that in a number of places and that breaks a power user's workflow. They promised to fix this, but we're still waiting. As I mentioned, I regularly come across this issue on some other websites as well but I don't remember them off the top of my head.

If you've never experienced this problem, you're either:

  • lucky or
  • don't use middle click

Let's fix it!

  • Please ensure you don't accidentally hijack the middle click action in your website/app where it would make sense to preserve the default behavior
  • If you come across a website/app that breaks the middle click (also ctrl/cmd/shift+click!) functionality, take the time to report an issue to its maintainer
  • Advocate for sane defaults in libraries!

The fix is fairly trivial, just check which button (and meta key) is pressed in your click handler. Using a library like jQuery would help you normalize event data across browsers but you still need to do some work there.

Feel free to share your thoughts and experiences in the comments!

Say Thanks
Respond

4 Responses
Add your response

14036
Icflorescu

Nice, and nicely written!

over 1 year ago ·
14125
006a614ac35cb9de3dcd7206ac5e1b7a

Very cool...I had no idea about this.

over 1 year ago ·
14140
3f23a52c7bc87296e96b5a05547da0e0

I'm a magic mouser so had no idea about it this but the principle can be generalised to any 'standard' functionality. Even if 'you' dont do this thing often, dont slight those who do. Standards exist for a reason and you better have a good reason if you're going to break them.

over 1 year ago ·
14145
D42a7264714dee5006b9c99d2567a320

@mattstyles true, it's very easy to unintentionally break native browser/OS functionality. By the way, Cmd+click on Mac does the same action as middle click, and event handlers that hijack clicks would hijack Cmd+clicks as well unless the corresponding check are in place. I updated the article and the code example slightly.

over 1 year ago ·