jQuery Alternative zu “return false”

Posted on : 11-08-2010 | By : DKl3in | In : Entwicklung

Schlagwörter: , ,

0

jQuery bietet eine gute Alternative zu einem "return false;"
und zwar die Methode "event.preventDefault()".

Jetzt stellt sich die Fragen,
welche Vorteile bringt die Verwendung dieser Methode gegenüber einem
normalen "return false;"?

Um diese Frage zu beantworten muss ich hier erstmal erklären,
was "return false;" eigentlich bewirkt.
Im Prinzip macht es nichts weiter, als zu verhindern,
dass ein bestimmtes Ereignis ausgeführt wird.
Z.B. kann es ein"click event" sein, welches ein Popup öffnet oder einfach nur eine Klasse ändert. In den meisten Fällen wird hierfür ein "a-Tag" (Anker/Link) verwendet.
Der Aufruf von "return false;" verhindert, dass die Standard Eigenschaft, in diesem Fall der Aufruf der URL im "href"-Attribut, ausgeführt wird.

So weit, so gut, genau das gleiche macht auch der Aufruf von "event.reventDefault()", jedoch mit einem kleinen Unterschied. Normalerweise wird ein "Event" durch den DOM einer Seite nach oben gereicht, was heisst, dass z.B. ein "click event" auf einen Link in einer Tabelle auch gleichzeitig ein "click event" auf die Tabelle selbst ist.
Ein "return false;" jedoch, verhindert auch dieses durchreichen,
was vielleicht nicht immer gewollt ist.

Wem dieses durchreichen von "Events" im DOM völlig unbekannt ist,
sollte sich einen wirklich guten Artikel auf Quirksmode.org durchlesen.

Möchte man jetzt jedoch auch dieses "Durchreichen der Events" verhindern, könnte man natürlich auf "return false;" zurückgreifen, oder den etwas eleganteren Weg mit einer weiteren jQuery Methode einschlagen, und zwar mit "event.stopPropagation();".

Zusammenfassen kann man also sagen:

1
2
3
function() {
  return false;
}

entspricht in jQuery:

1
2
3
4
function(event) {
  event.preventDefault();
  event.stopPropagation();
}

Meiner Meinung nach, erhält man ein wenig mehr Kontrolle über das gewünschte Ergebnis, als nur ein einfaches "return false;" zu verwenden.

 

Klicks ausserhalb von Elementen abfangen

Posted on : 23-07-2010 | By : DKl3in | In : Entwicklung

Schlagwörter: , ,

0

Jeder steht sicherlich irgendwann einmal vor dem Problem, dass er eine Layer, ein Menu oder sonsst etwas schließen muß, wenn man irgendwo anders hinklickt als auf das geöffnete Element.
jQuery bietet da eine sehr schöne Lösung an.

Angenommen man hat einen Layer mit der ID #Layer, und m&oul;chte darin klicken und machen was man will, jedoch wenn man ausserhalb des Layers klickt, soll dieses verschwinden.

Eine einfache Version würde wie folgende aussehen:

1
2
3
4
5
6
7
$('body').click(function() {
  $('#Layer').hide();
});
 
$('#Layer').click(function(event){
     event.stopPropagation();
});

Ich verwende sehr gerne den "bind" Befehl von jQuery, da würde das ganze in etwa so aussehen:

1
2
3
4
5
6
7
8
9
10
11
$('body').bind({
	click: function() {
		$('#Layer').hide();
	}
});
 
$('#Layer')bind({
	click: function(event){
     		event.stopPropagation();
	}
});

Auf den ersten Blick macht das ganze nicht viel mehr Sinn, doch, bietet der "bind" Befehl die Möglichkeit gleich mehrere EventHandler zu definieren und des Weiteren kann man mit der "unbind" Funktion die Handler ganz leicht wieder entfernen, falls man diese nicht mehr benötigt.