Rolf B: Merkwürdiges Browserverhalten: event.target bei click in button Element

Beitrag lesen

SELF-Forum

Merkwürdiges Browserverhalten: event.target bei click in button Element

Rolf B (Versionen)
– Informationen zu den Bewertungsregeln

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 und das 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
Beitrag melden
–
Informationen zu den Bewertungsregeln