éléments avec l'événement onlick Superposés

Question

Voici l'affaire:

Le carré noir a un événement onlick attaché
Le carré rouge, qui chevauche le carré noir, aussi son propre événement onclick.

Lorsque je clique sur le carré rouge, je voudrais que l'événement onclick de la place rouge à cuire.
Lorsque je clique sur le carré sombre, je souhaite que seul l'événement onclick du carré noir soit déclenché.

Actuellement, les deux sont tirés, et c'est un problème pour moi.

Comment puis-je atteindre mon objectif?

Certains morceau de code:

$('#dark-square').loadData({ 
    //load some HTML template with red square element inside 
    //Red square looks like : 
    //<div id="red-square" onclick="myFunction()">Some plain text</div> 
}).click(function() { 
    //what to do when dark-square only is clicked 
}) 

 

#red-square { 
    position: absolute !important; 
    top: 9px !important; 
    right: 16px !important; 
    z-index: 1000 !important; //I tried that to force the element to be on the top, but no result on onclick 
} 

//#dark-square is just a div with width/height 

TIP: Pour simplifier, je voudrais essayer de garder la syntaxe JavaScript pour ajouter mon événement onclick sur la place sombre, et syntaxe en ligne sur le carré rouge.

Merci

Answer 1

Vous pouvez le faire en ligne avec stopPropagation.

<div onclick="alert('Red Square Clicked'); event.stopPropagation();">I am the red square</div>