网站如何最终打破中间点击功能？

Question

默认情况下,单击鼠标中键将在新选项卡中打开链接.

有些网站最终破坏了这一功能.中键单击最终与左键单击相同.

为什么会这样？是因为他们为点击事件编程功能,并且错误地将其应用于所有点击而不是仅仅点击左键？

通过明确地给中间点击行为解决了问题吗？或者通过使现有的点击行为代码更加狭窄地应用？

Answer 1

概述:

很容易在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列出的内容.

• 修复Chrome中间点击行为
• 中键新标签
• 中间点击迷你

结论:

所以,是的,那些能够很好地处理这种行为的网站正在使用一些额外的代码来保留WebKit浏览器中的中间点击功能.