Merkwürdiges Browserverhalten: event.target bei click in button Element bearbeitet von Rolf B 25.06.2018 15:32 Hallo alle, ich habe die letzten Tage über folgendem Problem gegrübelt. (JA, da fehlen Dinge im HTML; es geht mir aber um die click-Problematik) ~~~ <html> <head> <meta charset="utf-8" /> <style> #tabb { margin: 5em auto; width: 20em; text-align:center; border: 3px double red; } #tabb button { margin:0; padding:0; width: 7em; height: 3em; vertical-align:top; } #tabb button img { width: 2em; height: 2em; border: 1px solid green; } </style> </head> <body> <div id="tabb"> <button type="button"><img src="icon.png"></button> <button type="button">CLICK ME</button> </div> <script> document.getElementById("tabb") .addEventListener("click", function(clickEvent) { alert(clickEvent.target.tagName); }); document.querySelector("#tabb img") .addEventListener("click", function(clickEvent) { alert("HURZ!"); }); </script> </body> </html> ~~~ Denkt euch irgendein quadratisches Icon in den Button hinein. Meine Testkandidaten sind IE 11, Firefox und Chrome. Klicke ich auf den Textbutton, oder auf den Image-Button außerhalb des Icons, lautet der Alert für alle 3 "BUTTON". Klicke ich auf das Icon, melden IE und Firefox immer noch "BUTTON", und Chrome meldet "HURZ!" und "IMG". Wenn ich mir [das](https://bugzilla.mozilla.org/show_bug.cgi?id=1089326) und [das](https://bugs.chromium.org/p/chromium/issues/detail?id=519621) anschaue, dann verhält sich Edge wie Chrome, und zwar richtig. Und das Verhalten von IE und FF ist falsch. Gemäß HTML Spec mache ich nichts falsch, ein Button akzeptiert Aussagen-Inhalt (phrasing content) und img hat diese Kategorie. Im Gegensatz dazu machen einige Testcases im Mozilla-Bug mMn etwas falsch, weil sie ein <a> im <button> haben oder sogar <button> in <button> (aus outlook.com) Wie ist das in anderen Browsern? Und wie geht man am besten damit um? Wenn ich einen click-Handler auf einen Container lege, möchte ich ja eigentlich im event.target das geklickte Control haben. Also den Button. In Chrome muss ich aber unterscheiden, ob es ein Button mit Inhalts-Elementen ist, und erstmal die Hierarchie hochtigern. Klicke ich außerhalb des Buttons, tapst der Tiger doof im Elementewald herum. Find ich ja eigentlich blöde. _Rolf_ -- sumpsi - posui - clusi
Merkwürdiges Browserverhalten: event.target bei click in button Element bearbeitet von Rolf B 25.06.2018 15:32 Hallo alle, ich habe die letzten Tage über folgendem Problem gegrübelt. (JA, da fehlen Dinge im HTML; es geht mir aber um die click-Problematik) ~~~ <html> <head> <meta charset="utf-8" /> <style> #tabb { margin: 5em auto; width: 20em; text-align:center; border: 3px double red; } #tabb button { margin:0; padding:0; width: 7em; height: 3em; vertical-align:top; } #tabb button img { width: 2em; height: 2em; border: 1px solid green; } </style> </head> <body> <div id="tabb"> <button type="button"><img src="icon.png"></button> <button type="button">CLICK ME</button> </div> <script> document.getElementById("tabb") .addEventListener("click", function(clickEvent) { alert(clickEvent.target.tagName); }); document.querySelector("#tabb img") .addEventListener("click", function(clickEvent) { alert("HURZ!"); }); </script> </body> </html> ~~~ Denkt euch irgendein quadratisches Icon in den Button hinein. Meine Testkandidaten sind IE 11, Firefox und Chrome. Klicke ich auf den Textutton, oder auf den Image-Button außerhalb des Icons, lautet der Alert für alle 3 "BUTTON". Klicke ich auf das Icon, melden IE und Firefox immer noch "BUTTON", und Chrome meldet "HURZ!" und "IMG". Wenn ich mir [das](https://bugzilla.mozilla.org/show_bug.cgi?id=1089326) und [das](https://bugs.chromium.org/p/chromium/issues/detail?id=519621) anschaue, dann verhält sich Edge wie Chrome, und zwar richtig. Und das Verhalten von IE und FF ist falsch. Gemäß HTML Spec mache ich nichts falsch, ein Button akzeptiert Aussagen-Inhalt (phrasing content) und img hat diese Kategorie. Im Gegensatz dazu machen einige Testcases im Mozilla-Bug mMn etwas falsch, weil sie ein <a> im <button> haben oder sogar <button> in <button> (aus outlook.com) Wie ist das in anderen Browsern? Und wie geht man am besten damit um? Wenn ich einen click-Handler auf einen Container lege, möchte ich ja eigentlich im event.target das geklickte Control haben. Also den Button. In Chrome muss ich aber unterscheiden, ob es ein Button mit Inhalts-Elementen ist, und erstmal die Hierarchie hochtigern. Klicke ich außerhalb des Buttons, tapst der Tiger doof im Elementewald herum. Find ich ja eigentlich blöde. _Rolf_ -- sumpsi - posui - clusi
nicht angemeldet
