9
votes

Comment annuler un événement de clic de conteneur DIV.

<div class="container">
  <div class="inside">I am not fire when click me</div>
</div>

$('.container').click(function(){
  // container do something here
});

jquery events

0 commentaires

3 Réponses :

1
votes

Ajouter un gestionnaire d'événements de clic à l'intérieur comme suit:

$('.inside').click(function(event) {
    // do anything you might want with the click for inside
    event.stopPropagation(); // prevents click event from bubbling up the DOM hierarchy
});

2 commentaires

L'événement de clic n'a pas fonctionné pour moi et MouseDown Evénement fonctionne bien, mais lorsque je traîne et déplacez la div [plug-in glagible appliquée], l'événement du conteneur déclenche à nouveau.

@qinhaixiang - Avez-vous vérifié et voyez quelle était la cible de l'événement lors de son arrivée au conteneur, comme décrit dans Cette réponse ? Était-ce l'intérieur div ou le conteneur div?

6
votes

$('.inside').click(function(e) {
    e.stopPropagation();
});
That should work for you. It stops any click in the inside div from bubbling up to the container.Here's a quick example as well - http://jsfiddle.net/Yf8Ra/1/

1 commentaires

Non. StopPropagation () est généralement une mauvaise idée et est spécifiquement la mauvaise chose à faire dans ce cas: CSS-Tricks.com/dangers-stopping-Event-Event-propagation


                        
                                            
                            
                                
                                    13
 votes
                                
                            
                            
                                
                                     En tant que solution plus générale, vous devriez vérifier   e.target  code>  a> in  conteneur  code> 's  Cliquez sur  CODE> Gestionnaire d'événements. 
$('.container').click(function(e) {
   // If you want to ignore clicks to anything inside the `.container` div:
   if (!$(e.target).hasClass('container')) return;
   // or, if you only want the `.inside` div to not fire the event,
   if ($(e.target).hasClass('inside')) return;

   // container do something here
});

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Excellente réponse! Merci!