中止链接,跨浏览器比较

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

情况:您点击了一个链接,突然意识到您不想点击该链接。因此,在释放鼠标按钮之前,您将光标移离链接。

这就是我所说的“中止”链接。几年前,我记得看到过某人的演示,他们在其中发现了一些奇怪的 CSS 组合,使得您无法从链接中中止。它在我的待研究清单上已经很久了,我刚刚开始着手研究它。我无法找到任何相关信息,也找不到其他地方对此有太多描述。我感觉这更像是旧浏览器的奇怪错误,而不是我目前使用的现代浏览器中容易复制的东西。

但是,这个中止链接的想法非常有趣。事实证明,不同的浏览器处理它的方式大不相同。让我们来看看。

Firefox 3.5.6

在 Firefox 中,您可以在链接内的任何位置点击,并且在链接被中止之前,您大约有 5 像素的拖动半径。

Safari 4.0.4

在 Safari 中,如果您点击文本之外,则可以在链接内的任何位置拖动,链接将不会中止。您必须实际在链接外部释放鼠标才能使其中止。

如果您点击文本,则在链接被中止并显示一个小链接弹出窗口之前,您大约有 40 像素的半径。

Chrome 4.0.249.30

无论您在 Chrome 中点击何处,在链接被中止之前,您大约都有 40 像素的拖动半径。

Opera 10.10

在 Opera 中,如果您点击并向左或右,甚至对角线拖动,则链接将不会中止,直到您离开链接的范围。但是,如果您向上或下拖动,您的链接将在大约 5 个像素处中止。这是针对点击文本本身的情况。

如果您点击文本,则在链接被中止之前,您大约有 5 个像素的半径。向左或向右拖动实际上会选择文本,这很不寻常(在其他浏览器中,您必须点击链接外部并四处拖动才能进行文本选择)。

IE 8.0.6

IE 具有始终如一的 5 像素半径来中止,无论您点击何处。

所以呢?

所以 - 什么也没有。不同浏览器,甚至使用相同渲染引擎的浏览器,处理中止链接的方式有所不同,这很有趣。这绝对是他们在创建浏览器时考虑过的事情,并且都对如何处理它得出了不同的结论。

此概念适用于任何具有点击或触摸表面的内容。例如,iPhone 允许您中止按下图标/链接,只需将手指从该区域移开即可。

为记录在案,本研究中使用的演示页面在这里

如果您想成为一个真正的混蛋…

重要的是链接能够被中止。这仅仅是礼貌,允许用户在发生错误之前退回。但是,如果您确实有充分的理由需要链接不可中止(或者您是一个真正的混蛋),则可以在 mouseDown 事件上使用 JavaScript 重定向页面。这是一些 jQuery 代码

$(function() {

    $("a").mousedown(function() {
        window.location = $(this).attr("href");
    });
    
});