Javascript: plusieurs événements tirant d'une seule action

Question

J'ai un événement onclick attaché à une région dans ma page qui provoque une certaine action à déclencher lorsque l'utilisateur clique dessus (naturellement). J'ai récemment ajouté une image à cette région. Lorsque l'utilisateur clique sur cette image, je souhaite qu'une autre action se produise et que l'action associée à la région entière ne se produise pas. Cependant, je trouve que les deux événements sont, en fait, déclenché quand on clique sur l'image. Comment puis-je supprimer l'action à l'échelle de la région lorsque l'utilisateur clique sur l'image?

Answer 1

Darit est correct, vous devez arrêter l'événement de bouillonnement (propagation):

function imgEventHandler(e) { 
    // ^notice: pass 'e' (W3C event) 

    // W3C: 
    e.stopPropagation(); 

    // IE: 
    if (window.event) { 
     window.event.cancelBubble = true; 
    } 

} 

Answer 2

Dans le gestionnaire d'événements pour l'image ne sont pas

event.cancelBubble = true; 

puis à la fin faire

return false; 

Answer 3

La question que vous exécutez en est connu comme événement bouillonnant. L'événement click de l'image fait une bulle jusqu'à tous les éléments parents de ce noeud. Vous voulez annuler le bouillonnement. La meilleure façon de faire cela qui fonctionne dans tous les navigateurs est d'utiliser un framework JavaScript. jQuery a un moyen très simple de le faire. D'autres frameworks ont des mécanismes similaires pour annuler le bouillonnement, il se trouve que je suis le plus familier avec jQuery.

Par exemple, vous pourriez faire quelque chose comme ça dans jQuery:

$('img').click(function() { 
    // Do some stuff 

    return false;// <- Cancels bubbling to parent elements. 
});