javascript - 网站如何最终破坏中键功能？

默认情况下，单击鼠标中键将在新选项卡中打开一个链接。

某些站点最终破坏了此功能。鼠标中键最终与鼠标左键相同。

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

通过显式地给中键单击行为来解决问题吗？还是通过使现有点击行为代码的适用范围更窄？

最佳答案

概述:

不经意间阻止WebKit浏览器中的单击中键功能非常容易。在WebKit浏览器(例如Chrome，Safari和现代Opera)中，在链接上单击鼠标中键会触发可预防的click事件。此行为不同于Firefox和IE，在Firefox和IE中，单击鼠标中键将不会触发click事件。

实际上有an open bug report from 2008 on this issue，不幸的是，在过去的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浏览器的内容。

Fix Chrome middle click behavior

middle button new tab

middle click mini

结论:

因此，是的，那些能够很好地处理此行为的网站正在使用一些额外的代码来保留WebKit浏览器中的单击中键功能。