Comportement étrange de bouton: appeler « onclick » l'élément de parent au lieu de lui-même (bouton HTML)

Question

Je suit la structure d'application Web, pour lequel je l'automatisation des tests:

<em unselectable="on" class="x-btn-split"> 
     <button type="button" class="x-btn-text " id="ext-gen523" title="Add Options">Add</button> 
</em> 

Les deux objets a des écouteurs d'événements, Ajout de JavaScript JavaScript dans certains fichiers js liés (je ne sais pas quel fichier exactement). Après avoir cliqué sur le bouton "Ajouter" avec la souris, appelle les appels de fonction AJAX et l'ajout de lignes à une table, après avoir cliqué sur l'élément em, ouvre le menu de l'application. Je tente de reproduire en cliquant sur le bouton AJOUTER via VBScript (comme je dis, j'automatise les tests de cette application), au lieu d'ajouter une ligne dans la table, l'ouverture du menu de l'application. Mais je sais exactement que je clique sur le bouton Ajouter, mais pas sur em-element. pseudocode, qui le font:

set obj = domHelper.GetElementByClassName(container,"x-btn-text","button") 
obj.click 

S'il vous plaît, laissez-moi savoir si vous connaissez des raisons de ce comportement, parce que je suis ne sais vraiment pas quoi penser. (J'ai essayé de nombreuses approches différentes pour résoudre ce problème, mais rien n'a aidé)

Merci!

Answer 1

click, comme la plupart des événements, «bulles» à travers tous les éléments ancêtres. Lorsque vous cliquez sur le <button>, oui, vous cliquez également sur le <em> qui le contient.

Si le gestionnaire d'événements pour le <em> a besoin de savoir que le clic est directement dans la zone de contenu du <em>, mais aucun de ses enfants, il faut regarder le event.target (srcElement dans IE < 9) propriété de vérifier que le clic est sur lui-même, ou pas sur le bouton, avant d'ouvrir un menu. Sinon, si le gestionnaire de clic du bouton appelle event.stopPropagation() (cancelBubble= true dans IE < 9), l'événement s'arrêtera et ne passera plus.