浏览器鼠标中键点击差异

鼠标中键的点击的行为默认情况下,通常是创建新的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可能会变成一个比较纠结的问题:)


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。