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

Question

默认情况下，单击鼠标中键会在新标签页中打开一个链接。

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

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

问题是否通过显式赋予中键单击行为来解决？还是让现有的点击行为代码适用范围更窄？

Answer 1

概述:

在 WebKit 浏览器中很容易无意中阻止中键点击功能。在 Chrome、Safari 和现代 Opera 等 WebKit 浏览器中，中键单击链接会触发可预防的 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 的中键点击行为，这也会阻止 native 的中键点击行为。

开发者解决方案:

可以通过使用非标准但广泛实现的检测按下哪个鼠标按钮来解决不一致 MouseEvent.which属性(property)。以下代码将允许中键单击功能正常运行。

更好的代码:

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 浏览器中的中键点击功能。