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

Question

默认情况下，单击鼠标中键会在新选项卡中打开 link。

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

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

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

Answer 1

概览：

很容易无意中阻止 WebKit 浏览器中的中键单击功能。在 Chrome、Safari 和现代 Opera 等 WebKit 浏览器中，中键单击 link 会触发可预防的 click 事件。此行为与 Firefox 和 IE 不同，它们中键单击 link 不会触发 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>

当使用 link 执行其他任务时，类似于此的代码很常见，例如阻止转至 link 以通过 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 浏览器中的中键单击功能。

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

How do websites end up breaking middle-click functionality?

javascript

mouse

mouseevent

mouseclick-event

jquery-click-event

概览：

问题代码：

开发人员解决方案：

更好的代码：

用户解决方案：

结论：