Click dans un bouton

Quelques petites remarques sur l'écoute des événements click sur un bouton HTML et les difficultés pour connaitre le lieu précis de l'interaction.

<button type="button" id="btn"> 
    Action
    <span id="btn-drop">Drop</span>
</button>
Code HTML de bouton
document.getElementById('btn').addEventListener('click', function (e) {
    console.log('click event on button');
});
document.getElementById('btn-drop').addEventListener('click', function (e) {
    console.log('click event on btn-drop');
});
Ecoute du click sur le bouton et un de ses enfants.

Si on clique sur la zone « drop » nous aurons un comportement différent selon les navigateurs :

  • sur Firefox, IE et Edge, seul l'écouteur attaché au bouton lui-même partira, pas celui attaché au span.
  • Sur Chrome, l'écouteur attaché au span partira, puis celui attaché au bouton.

Le comportement de Chrome est celui auquel on s'attend pour n'importe quel élément HTML et on serait tenté de croire à un bug du côté de Firefox et des autres, sauf que les specs HTML précisent pour les boutons qu'ils peuvent avoir pour enfants des éléments Phrasing content, but there must be no interactive content descendant.. Cela voudrait donc dire que l'on ne peut écouter des événements sur des éléments enfant des boutons ?!

Ça parait a priori logique et défendable : ne pas permettre une interaction autre que celle prévu par l'élément lui-même. Notons tout de même que la restriction n'existe pas avec un lien par exemple alors qu'on pourrait considérer qu'il s'agit d'une même problématique. Et puis ce qui est tout de même dérangeant c'est que la propriété target de l'événement émit n’identifie pas précisément l'élément sur lequel a eu lieu l'événement mais pointe toujours sur le bouton.

Page de démonstration

HICKSON, Ian ; BERJON, Robin ; FAULKNER, Steve, et al.. HTML 5. W3C, . 4.10.6 The button element