web-dev-qa-db-fra.com

Comment empêcher un événement click () via un div enfant vers un div parent dans jQuery?

Situation:

<div class="header">
    <div style="float: left;" class="headerTitle">+ OPEN</div>
    <div class="closeBtn" style="float: right;">- CLOSE</div>
 </div> 
<div class="touristenContent">.....</div>

Visuellement:

| + Ouvrir .............................. | -Fermer | .. | (en-tête) 
 
 | ............ Contenu ....................... ... |

L'en-tête DIV est un "gros bouton" avec l'événement jQuery click () pour ouvrir le contenu. Le DIV de fermeture est à l'intérieur du grand DIV et représente le bouton de fermeture également avec l'événement click () pour fermer le contenu. Ce bouton de fermeture n'est visible qu'en cliquant sur le gros en-tête.

Cliquer sur l'en-tête et ouvrir le contenu fonctionne comme prévu, mais en cliquant sur bouton de fermeture laissez l'événement click traverser l'en-tête DIV. Le contenu se ferme et s'ouvre à nouveau en raison d'événements en deux clics.

Alors, comment puis-je concevoir le tout correctement pour rendre le bouton de fermeture solide et empêcher le clic à travers celui-ci vers l'en-tête?

jqueryeventsclick
33
Paul Geisler

Vous devez empêcher l'événement de se propager dans l'arborescence DOM:

$('.closeBtn').click(function (evt) {
    evt.stopPropagation();

    // Your code here
});
53
Andy E
$('.closeBtn').click(function (event){
   event.stopPropagation();
   //   ... your code here
   return false;
});

cela devrait faire l'affaire, donc à chaque fois que vous cliquez sur fermer, cela n'affectera pas votre div en-tête,

14
Val

Pourquoi ne pas accrocher un événement open avec <div style="float: left;" class="headerTitle">+ OPEN</div> au lieu de parent div. Autrement return false ou stopPropagation depuis le gestionnaire de clic interne div

0
hungryMind