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

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
  1. Merkwürdiger Bug.

    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.

    Wäre ich gezwungen mit vanilla DOM zu arbeiten, würde ich mir vermutlich eine Konstante für den Button definieren, die ich dann innerhalb des Eventhandlers referenzieren kann.

    const button = document.querySelector('button');
    
    button.addEventListener('click', event => {
        console.log(button);
    });
    
    1. Hallo 1unitedpower,

      würde ich auch tun, wenn ich EINEN Button hätte. Siehe OP.

      Rolf

      --
      sumpsi - posui - clusi
      1. würde ich auch tun, wenn ich EINEN Button hätte. Siehe OP.

        Ah sorry, hab beim ersten Lesen übersehen, dass du mit Event-Delegation arbeitest. Brauchst du das an der Stelle wirklich?

        Falls ja, mir fallen noch zwei Versuche ein: Du könntest ausprobieren, ob der Bug nicht auftritt, wenn das Event in der Capturing-Phase behandelt wird. Das steuerst du über den dritten Parameter von addEventListener. Oder du suchst dir mit event.target.closest('button') den entsprechenden Button.

        1. Hallo 1unitedpower,

          ja, brauche ich, das ist eine Table mit Dokument-Referenzen, die per Ajax aktualisiert wird. Da ist Delegation am einfachsten.

          Capturing-Phase, hm, hab ich noch nicht erwogen. Da ist der Browser ja noch auf dem Weg von oben nach unten. probier Ist egal; das beeinflusst nur die Reihenfolge wenn auf Container und img ein Handler definiert ist.

          event.target.closest('button'), ja, da isser ja, der Tiger 😀. Vermutlich geht's nicht anders.

          Rolf

          --
          sumpsi - posui - clusi