Die Situation: Sie klicken auf einen Link und stellen plötzlich fest, dass Sie diesen Link nicht klicken wollten. Bevor Sie also die Maustaste loslassen, bewegen Sie den Cursor vom Link weg.
Das nenne ich "Link abbrechen". Vor Jahren erinnere ich mich an eine Demo, bei der jemand eine seltsame CSS-Kombination fand, die es unmöglich machte, einen Link abzubrechen. Das stand schon lange auf meiner To-Research-Liste und ich habe gerade angefangen, mich damit zu beschäftigen. Ich konnte nichts finden oder viel darüber finden. Ich habe das Gefühl, dass es sich eher um einen seltsamen alten Browser-Bug handelte und nicht um etwas, das in den modernen Browsern, die ich jetzt benutze, leicht zu reproduzieren ist.
Diese Idee, Links abzubrechen, ist jedoch ziemlich interessant. Wie sich herausstellt, gehen verschiedene Browser ziemlich unterschiedlich damit um. Schauen wir uns das mal an.
Firefox 3.5.6

In Firefox können Sie irgendwo in den Link klicken und haben einen Ziehradius von etwa 5 Pixeln, bevor der Link abgebrochen wird.
Safari 4.0.4
In Safari können Sie, wenn Sie *außerhalb des Textes* klicken, den Link überall innerhalb des Links ziehen, und der Link wird nicht abgebrochen. Sie müssen die Maus tatsächlich außerhalb des Links loslassen, damit er abgebrochen wird.

Wenn Sie auf den Text klicken, haben Sie einen Radius von etwa 40 Pixeln, bevor der Link abgebrochen wird und ein kleines Link-Popup angezeigt wird.

Chrome 4.0.249.30
Egal, wo Sie in Chrome klicken, Sie haben einen Ziehradius von etwa 40 Pixeln, bevor der Link abgebrochen wird.

Opera 10.10
In Opera wird der Link, wenn Sie nach links oder rechts oder sogar diagonal klicken und ziehen, nicht abgebrochen, bis Sie den Bereich des Links verlassen. Wenn Sie jedoch nach oben oder unten ziehen, wird Ihr Link nach etwa 5 Pixeln abgebrochen. Dies gilt für das Klicken außerhalb des Textes.
Wenn Sie auf den Text klicken, haben Sie einen Radius von etwa 5 Pixeln, bevor der Link abgebrochen wird. Das Ziehen nach links oder rechts wählt tatsächlich Text aus, was ungewöhnlich ist (in anderen Browsern müssen Sie außerhalb des Links klicken und ziehen, um Text auszuwählen).

IE 8.0.6
IE hat einen konsistenten Radius von 5 Pixeln zum Abbrechen, egal wo Sie klicken.

Na und?
Also – nichts. Es ist einfach irgendwie interessant, wie unterschiedlich Browser, sogar Browser, die dieselbe Rendering-Engine verwenden, das Abbrechen von Links handhaben. Das haben sie definitiv bedacht, als sie den Browser entwickelt haben, und alle kamen zu unterschiedlichen Schlussfolgerungen, wie damit umgegangen werden sollte.
Dieses Konzept gilt für alles mit einer Klick- oder Berührungsfläche. Zum Beispiel erlaubt das iPhone Ihnen, das Drücken eines Icons / Links abzubrechen, indem Sie einfach Ihren Finger von diesem Bereich weg bewegen.
Zur Dokumentation, die Demo-Seite, die in dieser Recherche verwendet wurde, finden Sie hier.
Wenn Sie ein echter Bastard sein wollten...
Es ist wichtig, dass Links abgebrochen werden können. Es ist einfach Höflichkeit, jemandem zu erlauben, einen Fehler rückgängig zu machen, bevor er passiert. Wenn Sie jedoch einen guten Grund hatten, warum Sie einen Link nicht abbrechen wollten (oder ein echter Bastard waren), könnten Sie die Seite mit JavaScript beim mouseDown-Ereignis umleiten. Hier ist etwas jQuery
$(function() {
$("a").mousedown(function() {
window.location = $(this).attr("href");
});
});
Lass das Marketingteam das nicht sehen. Sie werden darauf bestehen, dass Sie es zu jedem Link hinzufügen, der zu einem Verkauf oder einer Anzeige führt. Danke Chris für einen weiteren Artikel!
Es ist lustig, weil es wahr ist.
lol, es könnte schlimmer sein...
„Kann ein Benutzer zu beliebigen Links gelangen, über die Sie nur mit der Maus fahren?“
Ja, ändern Sie einfach die
$("a").mousedown(function() {window.location = $(this).attr("href");
});
zu
$("a").mouseover(function() {window.location = $(this).attr("href");
});
Sehr interessant, aber nicht sehr nützlich! :P Aber Respekt für die Recherche!
Ich schließe mich dem Respekt für Ihre Recherche an. Wie haben Sie jeden Browser getestet? Nur aus Neugier.
Ein interessanter Artikel... ein weiterer Backlink für Google.com
manchmal macht es Spaß, ein Bastard zu sein! hahaha!
Einige nette Forschungsergebnisse, obwohl ich nicht sagen kann, dass ich Linkabbrüche so oft hatte.
Ich hätte auch gedacht, dass Webkit-Browser das im Griff hätten. Ich frage mich, ob es Unterschiede zwischen Firefox-Versionen (z. B. v2 vs. v3) gibt oder ob das Betriebssystem dabei eine Rolle spielt?!
Es sieht so aus, als hätten Sie Ihren Opera-Eintrag verwechselt. Das Bild deutet darauf hin, dass Sie sich bei Auf-/Abwärtsbewegung an den Rand bewegen müssen, aber der Text besagt, dass Sie sich bei Links-/Rechtsbewegung an den Rand bewegen müssen... Ansonsten sehr interessant, gute Arbeit.
Ich werde diesen jQuery-Snippet vielleicht in Projekten verwenden, bei denen der Kunde ein Arschloch ist. Das und br { display:none; } nur zum Frust.
Sie sagen also, einige Browser sind Pro-Choice? ;)
Sie kommen mit den einzigartigsten Browser-Testideen, ich hätte nie daran gedacht, das zu testen.
Dieser Kommentar ist wirklich am Thema vorbei, daher werde ich es verstehen, wenn Sie ihn löschen. Ich habe gerade eine großartige CSS-Technik verwendet, die Ihr Problem mit Frillies im Kailin Yong-Projekt lösen kann (ich würde diesen Kommentar dort posten, aber es scheint, dass ich es nicht kann).
Es ist eigentlich mehr die Verwendung von CSS-Selektoren als eine Technik (ich hatte eine etwas kompliziertere Situation, also habe ich eine nette Technik entwickelt (ich meine Technik Technik)).
Kurz gesagt – :before und :after :D.
Ich stimme nicht zu, dass man Links immer abbrechen sollte!!! Manchmal kann man aber Zeit gewinnen, um Dinge zu laden und AJAX-Aufrufe durchzuführen. Es können nur 50 ms sein, aber das ist viel, wenn man versucht, seine App schneller zu machen!
Interessante Recherche... dieses Problem trat auf, als ich bei Google im UX-Bereich arbeitete, und die Art und Weise, wie dies in Gmail gehandhabt wird, ist bemerkenswert. Im Allgemeinen möchten Sie Ihren Benutzern immer die Möglichkeit geben, einen Klick abzubrechen (insbesondere bei Folgetransaktionen wie dem Bestätigen eines Kaufs in Handelssituationen), aber ich glaube, das Gmail-Team strebt danach, dass keine Aktion länger als 180 ms dauert... und es gibt eine Latenz von 30-70 ms beim Warten auf die „Freigabe“, die sich durch den Browser, die Maus und den Menschen ansammelt.
Daher haben sie sich entschieden, E-Mails beim Klicken und nicht beim Loslassen zu öffnen, da die kollektiv gesparte Zeit beim Durchklicken von Dutzenden von E-Mails den selteneren Anwendungsfall, das Öffnen der falschen E-Mail abzubrechen, bei weitem überwiegt (außerdem wissen Benutzer, wie sie schnell zurückkommen, und wie unbedeutend das Öffnen der falschen E-Mail ist). Die Entscheidung lässt Gmail dadurch viel, viel flotter wirken...
Die Moral von der Geschichte... diese Dinge sind aus Benutzererfahrungssicht definitiv wichtig, sowohl um Benutzern zu erlauben, einen Klick abzubrechen, wenn es wirklich wichtig ist, als auch um Dinge zu beschleunigen, wenn das sinnvoller ist.
Interessant! Ich habe gerade damit in GMail herumgespielt und tatsächlich reagiert es auf mousedown-Ereignisse, anstatt auf eine Freigabe zu warten. Ich bin sicher, das verleiht einer Hardcore-AJAX-App wie dieser eine Menge Geschwindigkeit.
Schön zu erfahren, wie GMail das nutzt!
Das ist interessant! Mir ist es eigentlich noch nie wirklich aufgefallen, aber ja, das macht Sinn, wenn es um das Öffnen von E-Mails geht.
Interessante Sachen, Chris, und ich stimme Eire32 zu, lass das Marketing das nicht sehen!
Ich LIEBE das Redesign übrigens. Es ist interessant zu sehen, wie Sie bei jeder Veröffentlichung Wege finden, einige Ihrer eigenen neuesten *Tricks* anzuwenden – das ist einfach pure „großartig“
Ich auch, ich liebe es (Redesign) Die Seite ist großartig!
Ein weiterer Test dieser Art: Links in die Registerkartenleiste ziehen öffnet den Link in einem neuen Tab, nur IE öffnet ihn im selben Tab. Ein Bild ziehen öffnet das Bild, ein Bild innerhalb eines Links ziehen öffnet den Link.
Firefox ist der einzige Browser, der das Ziehen von allem (auch normalem Text) in die Registerkartenleiste ermöglicht.
Verdammt, warum habe ich das jemals getestet?
Interessante Informationen und kleine Recherche, die Sie ausgegraben haben. Ich habe mich gefragt, wie es bei anderen Browsern außer Mozilla war, wie sie auf das Abbrechen von Links reagierten.
Der Gedanke kam mir, als ich nachts mit meinem iPhone herumspielte und versuchte, etwas zu vermeiden, das ich versehentlich angeklickt hatte, als ich unbequem lag. Dann ging ich auf meinem Mac Mini G4 online, um zu sehen, wie Firefox auf das Klicken und Wegbewegen meiner Maus reagierte. Es war interessant zu sehen, dass es in gewisser Weise die gleiche Wirkung hatte wie mein iPhone, natürlich habe ich keine harte Arbeit/Recherche betrieben.
Aber hey, danke, Sie haben mir mehr Informationen zu diesem Thema + andere Browser und einen schönen Code-Schnipsel gegeben!
– MexiChriS
In Opera wird das Auf-/Abwärtsziehen des Links verwendet, um ein Bookmarklet auf der Symbolleiste zu erstellen. Links/rechts nicht. Daher der Unterschied.
Ich dachte, ich wäre der Einzige, der „Links abbricht“ lol. Ist das der tatsächliche Begriff dafür?
Ich frage mich, wie viele weitere Browser auf den Markt kommen werden und uns (Webdesignern) mehr Arbeit für das Testen/Korrigieren von Rendering-Problemen in allen Browsern bescheren werden :)