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

时间:2015-03-20 22:42:59

标签: javascript mouseevent mouse mouseclick-event jquery-click-event

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

有些网站最终会破坏此功能。中键单击最终与左键单击相同。

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

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

1 个答案:

答案 0 :(得分:12)

概述:

很容易在WebKit浏览器中无意中阻止中间点击功能。在Chrome,Safari和现代Opera等WebKit浏览器中,在链接上单击鼠标会触发可预防的click事件。此行为与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列出的内容。

结论:

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