Standardaktion unterdrücken

[rookie]

Hallo!

Folgende Frage vermag ich nicht zu lösen:
Aus welchem Grund wird die Standardaktion bei diesem Beispiel nicht unterdrückt?

  
<p id="absatz" style="padding:50px; background:yellow;">  
	<a class="link" href="http://www.spiegel.de">Spiegel.de</a>  
</p>  

  
document.getElementById("absatz").onclick = function() {  
	var ziel = this.target || this.srcElement;  
	if(ziel.className == "link") {  
		alert("onclick");  
		return false;  
	}  
}  

Ohne if-Abfrage (die allerdings unerlässlich ist) funktioniert das Unterdrücken der Standardaktion problemlos.

Weiß jemand Rat?
rookie

[Der Martin]

Hi,

Aus welchem Grund wird die Standardaktion bei diesem Beispiel nicht unterdrückt?

welche Standardaktion??

<p id="absatz" style="padding:50px; background:yellow;">

<a class="link" href="http://www.spiegel.de">Spiegel.de</a>
</p>

  

> ~~~javascript

document.getElementById("absatz").onclick = function() {  

> 	var ziel = this.target || this.srcElement;  
> 	if(ziel.className == "link") {  
> 		alert("onclick");  
> 		return false;  
> 	}  
> }

Du hängst den Eventhandler an das umschließende p-Element. Das hat aber von Natur aus gar keine Standardaktion, die man unterdrücken könnte. Ebensowenig verfügt es über die Eigenschaften target oder srcElement, die du abzufragen versuchst. Der Link als Kindelement ist davon sowieso nicht betroffen, er sollte "normal" reagieren.

Ohne if-Abfrage (die allerdings unerlässlich ist) funktioniert das Unterdrücken der Standardaktion problemlos.
Weiß jemand Rat?

Möchtest du den Eventhandler nicht lieber an das a-Element binden?

So long,
 Martin

[rookie]

Möchtest du den Eventhandler nicht lieber an das a-Element binden?

Event-Delegation?

[molily]

Hallo,

Du hängst den Eventhandler an das umschließende p-Element. Das hat aber von Natur aus gar keine Standardaktion, die man unterdrücken könnte.
Möchtest du den Eventhandler nicht lieber an das a-Element binden?

Wieso? Der click-Event auf das a-Element kommt beim p-Element vorbei (Bubbling) und dort lässt sich auch event.preventDefault aufrufen, um die Standardaktion des a-Elements zu unterdrücken.

Mathias

[suit]

Wieso? Der click-Event auf das a-Element kommt beim p-Element vorbei (Bubbling) und dort lässt sich auch event.preventDefault aufrufen, um die Standardaktion des a-Elements zu unterdrücken.

Na sicher, aber die Verzweigung kann niemals zutreffen, weil das sich "this" bzw. "ziel" auf das p-Element bezieht und ziel.className aber versucht irgendwas am a-Element zu prüfen. Das schlägt also immer fehl und bubbelt ins nirvana ohne dass jemals das alert() oder das return false aufgerufen werden - und ja, preventDefault() wäre natürlich besser als ein "return false" (ist das jetzt schon in allen relevanten Browsern vorhanden oder muss man das noch nachbauen bzw. abstrahieren?).

[molily]

Hi!

Na sicher, aber die Verzweigung kann niemals zutreffen, weil das sich "this" bzw. "ziel" auf das p-Element bezieht

Ja, das ist mir bewusst. Ich habe nur dem Rat widersprochen, den Event-Handler an das a-Element selbst zu hängen. Das ist nicht nötig, um den Fehler zu korrigieren.

Grüße,
Mathias

[suit]

Aus welchem Grund wird die Standardaktion bei diesem Beispiel nicht unterdrückt?

p-Elemente haben beim draufklicken keine Default-Aktion

<p id="absatz" style="padding:50px; background:yellow;">
<a class="link" href="http://www.spiegel.de">Spiegel.de</a>
</p>

> ~~~javascript
  

> document.getElementById("absatz").onclick = function() {  
  
hier packst du ein click-Event auf das Element mit der ID "absatz" (also dein p-Element)  
  

> 	var ziel = this.target || this.srcElement;  
> 	if(ziel.className == "link") {  

if ermittelt du, ob das Ziel (das p-Element) die Klasse "link" hat, hat es aber nicht  
  

> 		alert("onclick");  
> 		return false;  
  
wird nicht ausgeführt.  
  
  

> 	}  
> }  
> 

Ohne if-Abfrage (die allerdings unerlässlich ist) funktioniert das Unterdrücken der Standardaktion problemlos.

Ohne der Verzweigung (die niemals zutrifft) wird das "return false" auch bei einem klick auf das a-Element ausgeführt (weil du ja beim Klick auf den Link immer "alle" klicks und es durch das DOM durchbubbelt).

Lösung: bring deine Logik in Ordnung, die für das Auffinden der Elemente zuständig ist und unterscheide klar _was_ eine Aktion liefern soll.

dein p-Element ist jedenfalls nicht dasselbe wie dessen Kind-Element (das a-Element).

[molily]

Hallo,

document.getElementById("absatz").onclick = function() {

var ziel = this.target || this.srcElement;
if(ziel.className == "link") {
alert("onclick");
return false;
}
}

  
target und srcElement sind Eigenschaften des [Event-Objekts](http://molily.de/js/event-handling-objekt.html). So sollte es gehen:  
  
~~~javascript
document.getElementById("absatz").onclick = function(event) {  
  if (!event) event = window.event;  
  var ziel = event.target || event.srcElement;  
  if (ziel.className == "link") {  
    return false;  
  }  
}

Mathias