JavaScript/DOM/Event/preventDefault

Interaktive Elemente haben oft ein browsereigenes Standardverhalten. So navigiert ein Link zu einer anderen Ressource, Links und Buttons können mit der Tab-Taste (↹ ) erreicht werden und erhalten dann den Fokus. Diese Standardaktion (Default action) kann, wenn das Ereignis cancelable ist, mit der Event.preventDefault()-Methode abgebrochen werden.

Syntax

event.preventDefault();

Ein Aufruf dieser Methode entpricht einer Rückgabe von return false beim traditionellen Event-Handling.

Anwendungsbeispiele

LightBox

In einer Lightbox werden Bilder oder (wie hier) Linktexte von einem Link umschlossen, der auf die Ressource der Großansicht verweist. Da ein ständiges Hin- und Herwechseln aber zu umständlich ist, soll auf Klick des Nutzers eine Großansicht innerhalb der Seite erfolgen.

Beispiel ansehen …

<a href="Peru-6.jpg" id="vollbildlink">Bild in Originalgröße ansehen</a>

Die Großansicht wird durch einen Link auf die Ressource des Bildes erreicht. Die ursprüngliche Funktionalität des Links soll durch ein Script unterbunden werden: Beim Klick auf den Link soll nur das Script ausgeführt, nicht mehr das Linkziel angesprungen werden.

document.addEventListener('DOMContentLoaded', function () {
 
  document.querySelector('#vollbildlink').addEventListener('click',function (evt) {
    evt.preventDefault();

    document.getElementById('vollbildlink').innerText = '';
	
    var elem = document.createElement('img');
    elem.src = 'https://wiki.selfhtml.org/images/4/41/Peru-6.jpg';
    elem.alt = 'Ceviche - ein peruanisches Leibgericht';
    document.getElementById('vollbildlink').appendChild(elem);
  });
	  
});

Der Link mit der id vollbildlink erhält eine Handler-Funktion, mit der bei einem Klick die Standardaktion des Links (das Navigieren auf eine andere Ressource) durch Aufruf von preventDefault; unterdrückt wird.
Anschließend wird mit createElement ein img-Element erzeugt, und mit der Punktnotation ein src- und ein alt-Attribut hinzugefügt. Das Ganze wird mit appendChild in das a-Element eingehängt.

Drag und Drop

Beim Drag & Drop müssen Sie ausgelöste Events wie den dragover-Event abschalten, um das Ablegen zu ermöglichen.

Beispiel ansehen …

function ablegenErlauben(ev) {
	ev.preventDefault();
}

function ablegen(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData('text');
    var target = ev.target;
    while (" "+target.className+" ".indexOf(" dropzone ") == -1) target = target.parentNode;
    target.appendChild(document.getElementById(data));
}

window.addEventListener("load",function () {
	var elms = document.querySelectorAll(".zielzone");
	for (var i = 0; i < elms.length; i++) {
		var zielzone = elms[i];
		zielzone.addEventListener("drop",ablegen);
		zielzone.addEventListener("dragover",ablegenErlauben);
	};

	elms = document.querySelectorAll("[draggable=true]")
	for (var i = 0; i < elms.length; i++) {
		var draggable = elms[i];
		draggable.addEventListener("dragstart",ziehen);
	};
});

In der Funktion ablegenErlauben() wird das dragover-Event mit preventDefault abgeschaltet. Dann kann abgelegt werden.

Siehe auch

• JavaScript/Tutorials/DOM
  • Ereignisverarbeitung: Standardaktionen unterdrücken
  • JavaScript/Tutorials/DOM/DOM-Manipulation#Bild-Wechsler
• JavaScript/DOM/Event: Standardaktionen aussetzen (preventDefault)

Weblinks

• W3C: preventDefault
• MDN: preventDefault

• smashingmagazine: JavaScript Events And Responding To The User
• mediaevent: preventDefault