问题 网站如何最终打破中间点击功能?


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

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

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

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


1264
2018-03-20 22:42


起源

我认为确实有很多脚本不会检查按下哪个按钮。 - Ruben
按钮行为是 几乎被塞了。中间按钮根本不应该生成单击事件,但是某些脚本会查找按钮按下(mousedown / up)并且错误地获取鼠标按钮ID。第一步是停止在脚本中使用左,右和中间并开始使用主要,次要,第三等,因为一些指针设备有一个按钮,有些可能有9或16。 - RobG
那么浏览器和JQuery使用1,2和3.大多数流行的网站处理中间点击就好了。所以我想知道这是因为他们精心编程了这种行为,还是因为他们没有犯下特定的错误。 - John Bachir
我很惊讶这个问题和答案每个都没有800个赞成。这是我遇到像Huffington Post甚至雅虎这样的日常冲浪网站最烦人的事情之一,我认为作为一家科技公司我会更清楚。 - Buttle Butkus


答案:


概述:

很容易在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浏览器中的中间点击功能。


11
2018-03-28 16:05



很棒的答案!仅供参考我认为你反过来阅读了我的“精心编程的......”评论(我可能写得不好)。我说,中间点击的网站 不 工作,这是因为他们付出了额外的努力使其发挥作用。你的回答似乎暗示:是的。 - John Bachir
@JohnBachir啊,好!是的,一定是这样的。 - Alexander O'Mara