Links abbrechen, Browservergleiche

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

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");
    });
    
});