molily: Javascript: Linkklick nachträglich ungültig machen

Beitrag lesen

Hallo,

Nur macht das stop() nicht das, was ich mir bei der Funktion gedacht habe. Ziel ist es, dass der Benutzer mit einem Confirm-Alert gewarnt wird, wenn er auf einen anderen Link klickt, um die Seite zu verlassen bevor er sein Formular gespeichert hat.

Bringe möglichst wenig verlockende Links in der Nähe eines solchen Formulars unter.

Ich muss doch wohl nicht alle Links in meinem Fenster mit einem onclick-Event ausstatten, das schaut, ob das Formular gespeichert wurde

Doch, anderes geht es nicht für Browser, die onbeforeunload nicht kennen.

und wenn nicht, ne Aktion wie document.links[0].target = "_blank"; schmeißt?

Das wäre nicht so elegant.

Versehe die Links mit onclick-Handlern - spätestens dann dynamisch, wenn Formulareingaben gemacht wurden (das heißt, wenn onchange-Ereignisse bei den Formularfeldern passieren). Mit return false; in einem Event-Handler kann man bewirken, dass die Standardaktion, die das Ereignis auslösen würde (im Fall eines Klicks auf einen Link: Die Zielseite wird annavigiert), unterdrückt wird. Bei <a href="link" onclick="return false">...</a> wird der Link also unwirksam gemacht.

Die entsprechenden JavaScript-Schnipsel:

function formularaenderung () {
   formular_geaendert = false;
}

<input onchange="formularaenderung()"

function formularpruefung () {
   if (formular_geaendert)
     var check = confirm("Du hast deine Eingaben noch nicht gespeichert. Bist du sicher, dass du diese Seite verlassen willst?");
     if (!check)
        return false;
   }
}

<a href="..." onclick="return formularpruefung()">...</a>

Das Problem dabei ist, dass (fast) jeder Link ein onclick-Handler haben muss. Die kann man entweder als HTML-Attribute notieren oder dynamisch vergeben, indem man document.links durchläuft und .onclick = formularpruefung; ausführt.

Eleganter ist es, alle Klicks auf das Dokument abzufangen (document.onclick = handler;) und zu prüfen, ob schon Formulareingaben gemacht wurden und es sich um Klicks auf verbotene a-Elemente handelt. Das geht über Ereignisobjekt.target bzw. Ereignisobjekt.srcElement. Dann kann man in dieser Handler-Funktion mit return false die besagte Standardaktion verhindern.
Eine ähnliche Funktion (zu einem anderen Zweck) habe ich einmal unter http://molily.de/css-position-fixed#javascript-alternative geschrieben.

Allerdings wäre dieser Aufwand ja nur für Browser nötig, die kein onbeforeunload kennen, das sind meinen Wissens vor allem Opera und Safari.

Mathias