Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

JavaScript/DOM/Event/preventDefault

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
Wechseln zu: Navigation, Suche

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.

  • DOM 2.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Syntax

event.preventDefault();

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

Anwendungsbeispiele[Bearbeiten]

LightBox[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Weblinks[Bearbeiten]