nicht angemeldet
Problem mit stopPropagation
Hi!
Ich habe ein Problem mit einem Label-Tag, das mehr als ein Eingabefeld enthält, und zwar in etwa in folgendem Code:
<html>
<head>
<title></title>
</head>
<body>
<label>
<span>Text</span>
<textarea>1</textarea>
<textarea id="test">2</textarea>
<script type="text/javascript">
var el = document.getElementById('test');
el.addEventListener('click', function (e) {
e.stopPropagation();
}, false);
</scrip>
</label>
</body>
</html>
Wenn man jetzt in die zweite Textarea klickt, sollte diese den Fokus erhalten und Texteingaben entgegennehmen. Leider wird aber scheinbar der Klick in die Textarea gebubblet und löst das Standard-Event für einen Klick auf das Label aus, d.h. der Fokus springt sofort zur ersten Textarea.
Das Ganze liesse sich natürlich leicht beheben, indem man das Label-Tag einfach weglässt, aber leider habe ich auf die HTML-Struktur keinen Einfluss. Das Skript, das ich zu schreiben versuche, wird in ein bestehendes System integriert, das die HTML-Struktur komplett vorgibt. D.h. ich müsste das irgendwie in Javascript lösen. Dazu hatte ich versucht, mit stopPropagation() das Bubbling zu stoppen, aber das hat leider keine Auswirkungen. Hat jemand eine Idee, was ich falsch mache?
-
Hast Du mal auf die Fehlerkonsole geschaut? </scrip> ist nämlich nicht geeignet ein <script>-Tag zu schließen, so dass der nachfolgende Code als fehlerhaftes JS nicht geparst werden kann und so die Ausführung verhindert wird.
Gruß, LX
--
RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
RFC 1925, Satz 11a: Siehe Regel 6a
-
Hast Du mal auf die Fehlerkonsole geschaut? </scrip> ist nämlich nicht geeignet ein <script>-Tag zu schließen, so dass der nachfolgende Code als fehlerhaftes JS nicht geparst werden kann und so die Ausführung verhindert wird.
Hab den Tippfehler rausgemacht, aber das ändert leider nichts. Firebug gibt mir keine JS-Fehler aus, der HTMl Validator meckert über den fehlenden Doctype usw., aber das macht keinen Unterschied, in meinem eigentlichen Script sind diese Dinge korrekt gesetzt.
Was mich übrigens auch stutzig macht ist, dass das Ganze nicht mal klappt, wenn man die erste Textarea auf unsichtbar setzt:
<html> <head> <title></title> </head> <body> <label> <span>Text</span> <textarea style="display:none">1</textarea> <textarea id="test">2</textarea> <script type="text/javascript"> var el = document.getElementById('test'); el.addEventListener('click', function (e) { e.stopPropagation(); }, false); </script> </label> </body> </html>-
Was mich übrigens auch stutzig macht ist, dass das Ganze nicht mal klappt, wenn man die erste Textarea auf unsichtbar setzt
P.S.: Habe eben denselben Code auf Opera und Safari getestet (und mit e.cancelBubble auf IE8). Der Code läuft überall wie er sollte, außer in FF, d.h. ich denke fast, dass es hier einen Browser-Bug gibt
-
-
-
Hi,
Das Ganze liesse sich natürlich leicht beheben, indem man das Label-Tag einfach weglässt,
Warum sollte man es weglassen? Labels vereinfachen die Nutzung von Formularen, wenn sie sinnvoll eingesetzt werden - also wenn sie nur je einem HTML-Element „zugeordnet” sind.
aber leider habe ich auf die HTML-Struktur keinen Einfluss.
HTML ist uninteressant;
DOM ist interessant.Also befreie doch einfach die zweite Textarea aus dem Label.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]