Verweis um Grafik - wohin zeigt event.target?

[pother_dane]

Hallo zusammen,

für den dämlichen Titel entschuldige ich mich zu Anfang, besser kann ich mein "Problem" nicht umschreiben.
Folgendes: um eine Reihe Grafiken sind Verweise gelegt. Mittels eventHandlern soll den Verweisen (nicht den Grafiken) ein Verhalten angedeiht werden. Klappt soweit ganz gut. Allein: lese ich in der den Event abfangenden Funktion id und className des angeklickten Verweises aus, gibt mir das Skript nicht id/className des Verweises aus, sondern die der eingeschlossenen Grafik. Dies geschieht in allen Browsern die ich hier zur Verfügung (FF3, Opera9, Konquerer4) habe gleich gut/schlecht (IEx kann ich hier nicht testen, schließe von der hohen Reproduktionsrate in den angegebenen Browsern darauf, dass auch der Murks (?) ausgeben wird). Und da frage ich mich: Wieso denn bloß? Steht in den Verweisen simpler Text bekomme ich was ich von dem Skript will; meine: id/className.

Zur Veranschaulichung, Code-Beispiel:

javascript:

  
test = {  
 addEvent : function (obj, key, func) {  
  for (var i=0, l=obj.length; i<l; i++) {  
    var tmp_elem = obj[i];  
    var is_key = tmp_elem.className.indexOf(key);  
    if (is_key == 0) {  
     tmp_elem.onclick = func;  
     }  
    else continue;  
    };  
    return true  
  },  
  
 init : function () {  
  window.onload = function () {  
   var links = document.getElementsByTagName("a");  
   var isAdded = test.addEvent(links, "link", test.say);  
   };  
  },  
  
 say : function (event) {  
  var ID = event.target.id;  
  var CL = event.target.className;  
  alert("ID: "+ID+"\nclassName: "+CL);  
 }  
};  
  
test.init();  

html:

  
<ul>  
<li><a href="#" class="link" id="ilink_1"><img src="bla.png" class="img" id="img_1"></a></li>  
<li><a href="#" class="link" id="ilink_2"><img src="bla.png" class="img" id="img_2"></a></li>  
<li><a href="#" class="link" id="ilink_3"><img src="bla.png" class="img" id="img_3"></a></li>  
<li><a href="#" class="link" id="llink_1">blablabla</a></li>  
<li><a href="#" class="link" id="llink_2">blablabla</a></li>  
<li><a href="#" class="link" id="llink_3">blablabla</a></li>  
</ul>  

Um ehrlich zu sein: eigentlich ist das Problem schon gelöst. Ersetzt man event.target durch event.currentTarget bekommt man genau das, was man will. An die Lösung gelang ich allerdings mittels Trial&Error und hat mit der Durchdrungenheit des Problems nichts zu tun. Wäre deshalb für Hinweise trotzdem dankbar.

Gruß

p_d

[bleicher]

Grüße,
weil img in einem a eher angecklickt wird, als der schmale und meist ausgelndete streifen der eigentlich dies a ist.
alles im a was kein text aber ein tag ist ein anderes objekt und wird so behandelt.

binde mal in ein a text und bild ein und beachte das verhalten.

MFG
bleicher

[Timo "God's Boss" Reitz]

Um ehrlich zu sein: eigentlich ist das Problem schon gelöst. Ersetzt man event.target durch event.currentTarget bekommt man genau das, was man will. An die Lösung gelang ich allerdings mittels Trial&Error und hat mit der Durchdrungenheit des Problems nichts zu tun. Wäre deshalb für Hinweise trotzdem dankbar.

Das ist kein Murks, schau in den Standard!

target: "Used to indicate the EventTarget to which the event was originally dispatched."
Also das Element, auf das ursprünglich geklickt wurde.

currentTarget:
"Used to indicate the EventTarget whose EventListeners are currently being processed. This is particularly useful during capturing and bubbling."
Also das Element, dessen Listener gerade abgearbeitet werden.

Ob das beim Internet Explorer alles so funktioniert, weiß ich nicht mehr, aber ich kann mich dunkel an Probleme damit erinnern. Eventuell recherchierst du nochmals selbst (oder testest die Seite im IE bzw. lässt testen).

[pother_dane]

hallo,

danke für deine hinweise. in den standard schauen, das sollte ich mal in die fehlerbehebungsroutine einschleifen.

"Used to indicate the EventTarget to which the event was originally dispatched."
Also das Element, auf das ursprünglich geklickt wurde.

das war mein fehler. ich war fälschlicherweise der annahme event.target zeige nur auf das objekt an dem der handler hängt. wie dumm von mir.

Ob das beim Internet Explorer alles so funktioniert, weiß ich nicht mehr, aber ich kann mich dunkel an Probleme damit erinnern. Eventuell recherchierst du nochmals selbst (oder testest die Seite im IE bzw. lässt testen).

du darfst dreimal raten: es geht natürlich nicht. srcElement tut was target tut, und eine ie-entsprechung für currentTarget gibt es wohl nicht, oder?

gruß,

p_d

[Timo "God's Boss" Reitz]

danke für deine hinweise. in den standard schauen, das sollte ich mal in die fehlerbehebungsroutine einschleifen.

Auf jeden Fall, erspart mir fast jegliche Fragerei hier im SELF-Forum. ;-)

du darfst dreimal raten: es geht natürlich nicht. srcElement tut was target tut, und eine ie-entsprechung für currentTarget gibt es wohl nicht, oder?

Es sieht so aus, das behauptet zumindest quirksmode.org: Event order. Ein Workaround wäre, das Objekt, an den der Listener gebunden wird, anderweitig zu speichern, er ist ja im Moment des Bindens bekannt.

[pother_dane]

hallo,

Es sieht so aus, das behauptet zumindest quirksmode.org: Event order.

und ich denke denen kann man schon vertrauen...

Ein Workaround wäre, das Objekt, an den der Listener gebunden wird, anderweitig zu speichern, er ist ja im Moment des Bindens bekannt.

das verstehe ich nicht so recht. ich habe das problem so gelöst, dass id/class in verweis und grafik so codiert sind, dass es bei der abarbeitung des events egal ist ob die img- oder a-id/class ankommt. ist nicht sehr elegant, funktioniert aber in allen (getesteten) browsern.

danke nochmal,

p_d

[Struppi]

du darfst dreimal raten: es geht natürlich nicht. srcElement tut was target tut, und eine ie-entsprechung für currentTarget gibt es wohl nicht, oder?
Es sieht so aus, das behauptet zumindest quirksmode.org: Event order. Ein Workaround wäre, das Objekt, an den der Listener gebunden wird, anderweitig zu speichern, er ist ja im Moment des Bindens bekannt.

Ich musste auch etwas suchen, aber Mathias weiß wie so oft den Weg.

Eine kleine Änderung am Code, zeigt was gesucht ist:

 say : function (e) {  
  if(!e) e = window.event;  
  var ID = e.target ? e.target.id : e.srcElement.id;  
  var CL = e.target ? e.target.className : e.srcElement.className ;  
  alert("ID: "+ID+"\nclassName: "+CL  
  +"\nID: "+this.id+"\nclassName: "+this.className  
  
  );  

Struppi.

[Timo "God's Boss" Reitz]

Ich musste auch etwas suchen, aber Mathias weiß wie so oft den Weg.

Stimmt, ich habe in meinen Versuchen immer mit attachEvent gearbeitet, dann ist this leider nicht das Element, sondern undefined (IE 6). Mit der element.onevent=fn-Variante geht es dann wohl.

[molily]

Hallo,

srcElement tut was target tut, und eine ie-entsprechung für currentTarget gibt es wohl nicht, oder?

Falls es noch nicht klar geworden ist:
Doch, nämlich this.

Mathias

[pother_dane]

hallo,

danke für deine hinweise. in den standard schauen, das sollte ich mal in die fehlerbehebungsroutine einschleifen.

"Used to indicate the EventTarget to which the event was originally dispatched."
Also das Element, auf das ursprünglich geklickt wurde.

das war mein fehler. ich war fälschlicherweise der annahme event.target zeige nur auf das objekt an dem der handler hängt. wie dumm von mir.

Ob das beim Internet Explorer alles so funktioniert, weiß ich nicht mehr, aber ich kann mich dunkel an Probleme damit erinnern. Eventuell recherchierst du nochmals selbst (oder testest die Seite im IE bzw. lässt testen).

du darfst dreimal raten: es geht natürlich nicht. srcElement tut was target tut, und eine ie-entsprechung für currentTarget gibt es wohl nicht, oder?

gruß,

p_d