nicht angemeldet
ID eines angeklickten Elements ermitteln
Hallo zusammen,
ist es möglich die ID eines angklickten Objekts zu ermitteln, ohne den Eventhandler des angklickten Objekts zu nutzen.
Bsp: onclick im body-Tag
<html>
<head>
<script>
function getClickedID()
{
...mach was...
}
</script>
</head>
<body onclick="javascript:getClickedID();">
<table id="abc">
...
</table>
<table id="def">
...
</table>
<table id="ghi">
...
</table>
</body>
</html>
Wird jetzt in den Bereich einer Tabelle geklickt, hätte ich gerne deren ID. Bloß wie?
Danke für eine Antwort.
Gruß Oli
-
Hi,
ist es möglich die ID eines angklickten Objekts zu ermitteln, ohne den Eventhandler des angklickten Objekts zu nutzen.
Spontan gesagt: Nein (jedenfalls nicht ohne ziemliche Klimmzüge).
Ebenso spontan: Warum sollte man denn den Eventhandler nicht benutzen? Darauf weiß ich nämlich auch keine Antwort ... =;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Spontan gesagt: Nein (jedenfalls nicht ohne ziemliche Klimmzüge).
Wie könnten die Klimmzüge denn aussehen?
Ebenso spontan: Warum sollte man denn den Eventhandler nicht benutzen? Darauf weiß ich nämlich auch keine Antwort ... =;-)
Weil ich keinen Einfluß auf den Code der Tabellen habe (siehe Beispiel oben). Ich kann da keinen Eventhandler einbauen.
Gruß Oli
-
Hallo!
Weil ich keinen Einfluß auf den Code der Tabellen habe (siehe Beispiel oben). Ich kann da keinen Eventhandler einbauen.
Wenn Du aber Einfluss auf das Document an sich hast, kannst Du doch durch die Tabelle rennen und jeder Zelle, oder TR, oder was auch immer Du anfangen willst dynamisch mit einem handler versehen? Stichwort: setAttribute
Schönen Gruß
Afra
-
Hi,
Wie könnten die Klimmzüge denn aussehen?
Das können wir uns schenken, denn ...
Ebenso spontan: Warum sollte man denn den Eventhandler nicht benutzen? Darauf weiß ich nämlich auch keine Antwort ... =;-)
Weil ich keinen Einfluß auf den Code der Tabellen habe (siehe Beispiel oben). Ich kann da keinen Eventhandler einbauen.Doch, kannst Du:
<body onload="if(document.getElementsByTagName) { for(i=0; i<document.getElementsByTagName("table").length; i++) { document.getElementsByTagName("table")[i].onclick=function() { alert(this.id); } } }">
Geht alle Tabellen durch und baut jeweils einen Eventhandler ein, der bei Click die ID ausgibt.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hallo,
<body onload="if(document.getElementsByTagName) { for(i=0; i<document.getElementsByTagName("table").length; i++) { document.getElementsByTagName("table")[i].onclick=function() { alert(this.id); } } }">
Warum nicht zentral alle Events abfangen? Genau dafür gibt es Bubbling/Capturing.
(Übrigens ist es nicht nötig, getElementsByTagName bei so etwas mehrfach aufrufen - u.U. ist das ziemlich unperformant.)Mathias
-
Hi,
Warum nicht zentral alle Events abfangen?
Warum nicht genau die setzen, die man braucht? Jedenfalls sofern es sich nicht um tausende von Tabellen handelt.
(Übrigens ist es nicht nötig, getElementsByTagName bei so etwas mehrfach aufrufen - u.U. ist das ziemlich unperformant.)
Ja, das macht man einmalig als Init, und es läßt sich optimieren.
Wenn man alle Events abfängt, jedesmal bei jedem Click dann den jeweiligen Zweig durchhechelt, und dann erstmal prüft, ob es das gewünschte Element ist, dürfte das nicht unbedingt performanter sein. ;)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
Warum nicht genau die setzen, die man braucht? Jedenfalls sofern es sich nicht um tausende von Tabellen handelt.
...
Wenn man alle Events abfängt, jedesmal bei jedem Click dann den jeweiligen Zweig durchhechelt, und dann erstmal prüft, ob es das gewünschte Element ist, dürfte das nicht unbedingt performanter sein.
Da braucht man nichts durchhecheln, das Event kommt sowieso jedesmal beim BODY und beim DOCUMENT an, sofern nicht irgendwo explizit das Eventbubbling verhindert wird.
Und das target hat das Event sowieso als Eigenschaft auch dabei.gruß
peter-
Hi,
Da braucht man nichts durchhecheln, das Event kommt sowieso jedesmal beim BODY und beim DOCUMENT an, sofern nicht irgendwo explizit das Eventbubbling verhindert wird.
Das ist schon klar.
Und das target hat das Event sowieso als Eigenschaft auch dabei.
Das sowieso.
Du machst aber einen Denk- sowie einen praktischen Fehler:
1. target ist Standard (Mozilla & Co.). Der IE braucht srcElement (s. molily).
2. "target" ist das "tiefste" geclickte Element. Also mindestens die TD/TH (wenn textdata drin ist). Aber bei <td><div><b><i><sup>Hi!</sup><i></b></td> ist das Element SUP. Du mußt dich schon hochhangeln bis Du irgendwann das (Eltern-)Element erreicht hast, das Du haben möchtest (also hier TABLE -> target(=SUP).parentNode(=I).parentNode(=B).parenNode(=DIV).parentNode(=TD).parentNode(=TBODY).parentNode(=TABLE).id) (auch hier s. molily), bzw. das Ende erreicht ist, ohne das ein passendes (Eltern-)Element gefunden wurde (dann nämlich, wenn der User irgendwo anders geclickt hat.Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
- target ist Standard (Mozilla & Co.). Der IE braucht srcElement (s. molily).
Ja. Sorry, war ich schlampig.
- ....
Ja, auch meine Schlampigkeit.
Hab ich schon gemerkt. siehe Posting.gruß
peter-
Hi,
Ja. Sorry, war ich schlampig.
Macht nix - ich auch (TR vergessen und DV nicht geschlossen). Echte Fluchtfehler (Flucht in den Feierabend) ... :))
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
sorry,
mein Fehler, ich hab schlambig gelesen und übersehen, daß es um die Tabellen geht und nicht die einzelnen Elemente innerhalb.
Dann geb ich dir recht, ist wahrscheinlich besser, die Handler gezielt zu setzen.
Alternativ könnte ich mir vorstellen, die Methode von molily anzuwenden und beim ersten Klick in eine Tabelle den Handler draufzusetzen.
Wenn man das Event weiter oben im DOM-Baum nicht mehr braucht, kann man an dieser Stelle (gefundenes TABLE-Element) ja auch das Bubbling blockieren, so daß die Funktion auf dem DOCUMENT nicht mehr aufgerufen wird.
Ging dann auch gut bei Tausenden von Tabellen.gruß
peter
-
-
-
-
-
-
-
Hallo,
Hallo zusammen,
ist es möglich die ID eines angklickten Objekts zu ermitteln, ohne den Eventhandler des angklickten Objekts zu nutzen.
Du kannst aufsteigende Click-Events beim document-Objekt abfangen:
document.onclick = handler; function handler (e) { e = e || window.event; var target = e.target || e.srcElement alert("Geklicktes Element: " + target + "\nID: " + target.id); }Über das Eventobjekt kann man auf das Target des Events zugreifen, das ist das Element, von dem der Click-Event ausging. Dessen ID lässt sich dann abfragen.
<table id="abc">
...
</table>
<table id="def">
...
</table>
<table id="ghi">
...
</table>In dem Fall müsstest du vom Target des Events zusätzlich solange aufsteigen (über parentNode), bis du das zugehörige table-Element findest.
var elem = target; while (elem = elem.parentNode) { if (elem.nodeName == "TABLE") break; } alert(elem.id);Mathias
-
Hi,
könnte damit gehen:
function getClickedID(e)
{
if(!e){e=window.event;}alert(e.target.id);
}
<body onclick="getClickedID(event);">
gruß
peter