web-dev-qa-db-fra.com

Comment: div avec onclick dans une autre div avec onclick javascript

juste une petite question. J'ai un problème avec les divs avec onclick javascript l'un dans l'autre. Lorsque je clique sur la division interne, il ne doit déclencher que le code javascript onclick, mais le code JavaScript de la division externe est également activé. Comment l'utilisateur peut-il cliquer sur la division interne sans activer le code javascript de la division externe?

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
javascripthtmlonclick
42
Daniel Brink

Il existe essentiellement deux modèles d’événement en javascript. Capture d’événement et Bubbler événement . En cas de déclenchement d'événement, si vous cliquez sur div interne, l'événement clic div interne est déclenché en premier, puis le clic div externe déclenché. lors de la capture d’événement, l’événement div externe déclenché et l’événement div interne déclenché. Pour arrêter la propagation d'événement, utilisez ce code dans votre méthode clic.

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

Consultez les informations sur la propagation d'événements ici

En particulier, vous voudrez qu'un code comme celui-ci dans vos gestionnaires d'événements empêche les événements de se propager:

function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}
18
Tim Goodman

Ajoutez simplement ce code:

window.event.stopPropagation();
6
user3438083

return false; de la fonction onclick de la div interne:

<div onclick="alert('inner'); return false;" ...

Ce que vous avez à faire s'appelle propagation d'événements .

5
Tatu Ulmanen

Ceci est un cas d'événement bouillonnant.

Vous pouvez utiliser 

e.cancelBubble = true; //IE

et

e.stopPropagation(); //FF
3
rahul

Une autre façon pour les navigateurs Webkit:

<div onclick="alert('inner'); event.stopPropagation;" ...
2
Juliano Moraes

C'était très utile, mais cela n'a pas fonctionné pour moi.

Ce que j'ai fait est décrit ici .

J'ai donc posé une condition à l'événement onclick extérieur:

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}
0
shooby

Ici est une autre référence pour vous aider à comprendre le bouillonnement d'événements javascript. 

0
Ben

Cela a fonctionné pour moi dans Jquery:

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

De cette façon, si la cible actuelle n'est pas la même que la div externe, elle ne fera rien. Vous pouvez implémenter des fonctions normales sur les éléments enfants.

0
Ramtin

Vous pouvez utiliser

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });

0
AngelQuesada

vous avez deux "div" et trois "/ div".

0
freddie