情况:您点击了一个链接,突然意识到您不想点击该链接。因此,在释放鼠标按钮之前,您将光标移离链接。
这就是我所说的“中止”链接。几年前,我记得看到过某人的演示,他们在其中发现了一些奇怪的 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");
});
});
不要让营销团队看到这个。他们会坚持要求您将其添加到每个通往销售或广告链接的链接中。感谢 Chris 的另一篇文章!
它很有趣,因为它是真的。
哈哈,可能会更糟糕…
“你能让用户访问任何你刚刚悬停的链接吗?”
是的,只需更改
$("a").mousedown(function() {
window.location = $(this).attr("href");
});
为
$("a").mouseover(function() {
window.location = $(this).attr("href");
});
非常有趣,但不太实用!:P 但感谢您的研究!
我赞同您对研究的称赞。您是如何测试每个浏览器的?只是好奇。
一篇有趣的文章……Google.com 的另一个反向链接。
有时候做个混蛋也挺有趣的!哈哈!
一些不错的研究,尽管我不能说我经常需要中止。
我也曾认为 Webkit 浏览器会解决这个问题。我想知道 Firefox 的不同版本(例如 v2 与 v3)之间是否存在差异,或者操作系统是否也会对这方面产生影响?!
看起来您将 Opera 的部分内容弄混了。图片表明,向上/向下移动时,您必须移动到边缘,但文本却说您必须在左右移动时移动到边缘……否则非常有趣,干得好。
我可能会开始在客户很烦人的项目中使用该 jQuery 代码段。还有 br { display:none; } 只是为了让他们感到沮丧
所以您的意思是有些浏览器支持选择权?;)
您想出了最独特的浏览器测试创意,我从未想过要测试这个。
这条评论确实跑题了,所以如果您删除它,我表示理解。我只是使用了一些很棒的 CSS 技术,可以解决您在 Kailin Yong 项目中遇到的装饰问题(我本应该在那个地方发布这条评论,但似乎我做不到)。
实际上,这更多的是 CSS 选择器的使用,而不是技术本身(我遇到了更复杂的情况,因此我开发了一种很棒的技术(我的意思是技术技术))。
长话短说 - :before 和 :after :D。
我不同意您应该始终中止链接!!!但是,有时您可以赢得时间来开始加载内容并执行 AJAX 调用。它可能只有 50 毫秒,但在您尝试使应用程序更快时,这却很多!
很有意思的研究……我在 Google 做 UX 的时候遇到了这个问题,Gmail 中的处理方式值得注意。通常情况下,你总是希望让用户能够取消点击(尤其是在涉及到后果的操作,比如电商场景中的确认购买),但我认为 Gmail 团队的目标是让任何操作都不超过 180 毫秒……并且在等待“释放”时会有 30-70 毫秒的延迟,这是由浏览器、鼠标和人本身累积造成的。
所以他们选择在点击时打开邮件,而不是在释放时打开,因为在浏览数十封邮件时节省的总时间远远超过了需要取消打开邮件这种不太常见的用例(而且用户知道如何快速返回,以及打开错误邮件的后果微不足道)。这个决定确实让 Gmail 感觉非常非常流畅……
寓意……从用户体验的角度来看,这些东西绝对很重要,既要允许用户在真正需要的时候取消点击,也要在更合理的情况下加快速度。
有趣!我刚刚在 Gmail 中试了一下,确实是在鼠标按下时响应,而不是等待释放。我相信这确实为像 Gmail 这样的 AJAX 应用增添了不少流畅度。
很高兴了解到 Gmail 是如何使用这个技巧的!
这很有趣!之前从未注意到,但确实,在打开邮件时这样做很有道理。
很有意思的内容,Chris,我同意 Eire32 的观点,不要让营销人员看到这个!
顺便说一句,我非常喜欢重新设计的网站。看到你在每次发布过程中都找到方法应用你自己的最新“技巧”,这真是太棒了。
我也是,我非常喜欢它(重新设计)。这个网站太棒了!
另一个类似的测试:将链接拖到标签栏会在新标签页中打开链接,只有 IE 会在同一标签页中打开。拖动图片会打开图片,拖动链接内的图片会打开链接。
Firefox 是唯一一个允许将所有内容(包括普通文本)拖到标签栏的浏览器。
天哪,我为什么要测试这个?
你试图挖掘的这些有趣的信息和小研究,我一直想知道除了 Mozilla 之外的其他浏览器是如何处理取消链接操作的。
有一天晚上,我在玩 iPhone 时突然想到这个问题,我试图避免在不舒服地躺着时意外点击进入某些内容。然后我在我的 Mac Mini G4 上上网,看看 Firefox 对点击和移开鼠标的反应。看到它与我的 iPhone 产生了一些类似的效果,很有趣,当然,我没有做任何辛苦的工作/研究。
但是嘿,谢谢你,你给了我更多关于这个话题以及其他浏览器的信息,还有一个不错的代码片段!
– MexiChriS
在 Opera 中,链接的上下拖动用于在工具栏上创建书签。左右拖动则无效。因此会出现差异。
我还以为只有我才会“取消链接”哈哈。这是它的正式说法吗?
想知道市场上还会出现多少浏览器,让我们(网页设计师)做更多工作来测试/修正所有浏览器中的渲染问题 :)