默认情况下,单击鼠标中键将在新选项卡中打开链接。
一些网站最终破坏了这一功能。中键单击最终与左键单击相同。
为什么会这样?是因为他们为点击事件编程功能,并且错误地将其应用于所有点击而不是仅仅点击左键?
通过明确地给中间点击行为解决了问题吗?或者通过使现有的点击行为代码更加狭窄地应用?
默认情况下,单击鼠标中键将在新选项卡中打开链接。
一些网站最终破坏了这一功能。中键单击最终与左键单击相同。
为什么会这样?是因为他们为点击事件编程功能,并且错误地将其应用于所有点击而不是仅仅点击左键?
通过明确地给中间点击行为解决了问题吗?或者通过使现有的点击行为代码更加狭窄地应用?
很容易在WebKit浏览器中无意中阻止中间点击功能。在Chrome,Safari和现代Opera等WebKit浏览器中,中间点击链接会触发可预防的操作 click
事件。此行为不同于Firefox和IE,其中中键单击链接不会触发 click
事件。
实际上 关于这个问题的2008年开放式错误报告,遗憾的是,在过去的7年里似乎没有出现过任何问题。
因此,让我们来看看在完成普通的操作时,在WebKit浏览器中破解此功能是多么容易。
var link = document.getElementById('link');
link.addEventListener('click', function(e) {
e.preventDefault();
alert('You clicked!');
});
<a id="link" href="http://www.example.com/">example.com</a>
当使用链接来执行其他任务时,类似于此的代码很常见,例如阻止转到链接以通过AJAX加载内容。但是,考虑到WebKit的中键单击行为,这也会阻止本机中键单击行为。
可以通过检测使用非标准但广泛实现的鼠标按钮来解决不一致性 MouseEvent.which
属性。以下代码将允许中键单击功能正常运行。
var link = document.getElementById('link');
link.addEventListener('click', function(e) {
if (e.which === 2) {
return;
}
e.preventDefault();
alert('You clicked!');
});
<a id="link" href="http://www.example.com/">example.com</a>
不幸的是,由于保留正常行为需要开发人员提供额外的知识和实现,除非修复了WebKit错误,否则打破此功能的网站无疑会继续存在。很多开发人员甚至不知道中间点击的这个功能存在,更不用说测试兼容性了。
此问题促使创建至少一些旨在解决问题的不同浏览器扩展。以下是上面提到的错误报告中为Chrome列出的内容。
所以,是的,那些能够很好地处理这种行为的网站正在使用一些额外的代码来保留WebKit浏览器中的中间点击功能。