Deux différents OnClick sur deux divs, l'un sur l'autre

Question

J'ai deux divs, un grand et un plus petit sur l'autre, chaque div a sa propre méthode OnClick. Le problème que j'ai est quand j'ai cliqué sur le div plus petit, la méthode OnClick de la grande div est appelée aussi.

Qui puis-je éviter?

Answer 1

La meilleure façon de détecter quel élément a été cliqué est d'analyser la cible de l'événement (cliquez sur l'événement). J'ai préparé un petit exemple pour ce cas. Vous pouvez le voir dans le code ci-dessous.

 
function amIclicked(e, element) 
{ 
    e = e || event; 
    var target = e.target || e.srcElement; 
    if(target.id==element.id) 
     return true; 
    else 
     return false; 
} 
function oneClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('One is clicked'); 
    } 
} 
function twoClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('Two is clicked'); 
    } 
} 

Cette méthode javascript peut être appelé avant d'exécuter votre script

Exemple

 
<style> 
#one 
{ 
    width: 200px; 
    height: 300px; 
    background-color: red; 
} 
#two 
{ 
    width: 50px; 
    height: 70px; 
    background-color: yellow; 
    margin-left: 10; 
    margin-top: 20; 
} 

</style> 



<div id="one" onclick="oneClick(event, this);"> 
    one 
    <div id="two" onclick="twoClick(event, this);"> 
     two 
    </div> 
</div> 

J'espère que cela aide.

Answer 2

Votre problème est que l'événement click se propagera dans l'arborescence des éléments. Par conséquent, chaque élément contenant un élément sur lequel vous avez cliqué déclenche également un événement click.

La solution la plus simple consiste à ajouter return false à votre gestionnaire.

Si vous utilisez jQuery, vous pouvez appeler e.stopPropagation(); sinon, vous aurez besoin d'appeler e.stopPropagation() si elle existe, et définissez event.cancelBubble = true.

Pour plus d'informations, voir here.

Answer 3

Si vous décidez d'utiliser une bibliothèque javascript telle que www.jquery.com, vous pouvez facilement accomplir ce que vous essayez de faire en utilisant les options de prévention de propagation.

Answer 4

Ce que vous avez affaire est le bouillonnement d'événements. Jetez un oeil à cet article: http://www.quirksmode.org/js/events_order.html.

Fondamentalement, pour arrêter l'événement de passer à l'élément parent, vous pouvez utiliser quelque chose comme ceci:

document.getElementById('foo').onClick = function(e) { 

    // Do your stuff 

    // A cross browser compatible way to stop propagation of the event: 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
} 

Answer 5

Vous êtes en cours d'exécution dans un cas commun de propagation des événements. Consultez quirksmode.org pour obtenir tous les détails sur ce qui se passe exactement. Au fond, ce que vous devez faire dans le gestionnaire de clic de plus petite div est la suivante:

if (!e) var e = window.event; 
e.cancelBubble = true; 
if (e.stopPropagation) e.stopPropagation();