浏览器鼠标中键点击差异

鼠标中键的点击的行为默认情况下，通常是创建新的tab并在其中打开指定的链接。浏览器发展到今天，对于鼠标中键点击的事件处理上，仍然没有能够统一，这导致对应于中键的监听变得不可靠，而对于习惯用中键的用户来说，点击某些链接会出现意料之外的结果。

下面对现行浏览器的一般表现做一些总结，浏览器分别为：IE9， FF31，Chrome36以及Opera的Presto内核的末代版本12.17，本文结果均以这些版本为限。

测试代码很简单，由于各浏览器对于鼠标键位的索引值也有些许不同，所以用了jQuery来统一。<a>中的<span>是故意添加的，下文会有说明。

<a href="http://swordair.com" id="link">click <span>here</span></a>

$("#link").on('onclick', function(e) { 
    alert(e.which);
});

首先说一下已经作古的Presto：中键点击事件在任何情况下都是被忽略的，当中键点击一个链接时，Opera打开一个新的tab并加载目标URL的内容。这样的做法虽然很一刀切，但也因此少了很多歧义。中键的作用变得非常直观，但随着Presto的消逝，我们也就少了一种最直观的处理的观点。

Opera是个特例，写出来只是提供多一种思路。现行浏览器对于中键点击的处理并不像Opera这么干脆。

所有浏览器都能完整捕获和处理除了onclick以外的，诸如onmousedown，onmouseup事件，而唯独对onclick事件英雄所见不同。

Firefox对于中键点击的处理上，唯独onclick事件只能在document或window上冒泡获取，而无法在元素上直接触发。中键onclick的表现上，Firefox的做法可能更为灵活。对于用户来说，中键的行为是直观的。对开发者来说，却又没有将路堵死。

IE的表现很有趣，当点击的目标是一个链接时，IE忽略了onclick，直接新建了tab打开了新页面。但当点击目标不是链接，甚至，即便只是链接的子元素，IE都会180度转变直接触发onclick。这也是为什么之前的测试代码里，click here的一部分被放在了span里的原因。IE的做法其实很小聪明，在绝大部分应用环境里，行为表现都更为合理。但相对不统一的处理方式，对开发一方造成困扰。

最后就是Chrome了，代表的是blink/webkit。遗憾的是，Chrome的做法也是一刀切，但比起Opera对于默认行为的遵从，Chrome的做法显然不怎么优雅。Chrome触发中键的onclick，并且无论目标是否是一个链接。这造成的问题是，如果用户习惯使用中键打开新页面，而链接上恰巧又带了相应函数，那么最后的结果可能就是用户期望之外的：

<a href="http://swordair.com" onclick="gotoOtherLink()">link</a>

总结以上，就是Opera最为干脆，Firefox最为温和，IE最为小聪明，Chrome最为笨拙。末了，在为Presto默哀几秒...

所以在网页中对中键的控制是非常不可靠的，好在我们使用上也不是很频繁。唯独在网页游戏这一块，由于可能需要用到中键的功能，中键的onclick可能会变成一个比较纠结的问题:)