Comment faire en sorte que l'événement de clic se déclenche UNIQUEMENT sur le DIV parent, et non sur les enfants ?

Question

J'ai un DIV avec une classe foobar et quelques DIVs à l'intérieur de ce DIV qui ne sont pas classés, mais je suppose qu'ils héritent de la classe foobar classe :

$('.foobar').on('click', function() { /*...do stuff...*/ });

Je veux que cela ne se déclenche que lorsque l'on clique quelque part dans le DIV mais pas sur ses DIVs enfants.

Answer 1

Si le e.target est le même élément que this vous n'avez pas cliqué sur un descendant.

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;

  alert( 'clicked the foobar' );
});

.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>

Answer 2

Je n'ai pas réussi à faire fonctionner la réponse acceptée, mais ceci semble faire l'affaire, au moins dans vanilla JS.

if(e.target !== e.currentTarget) return;

Answer 3

Il existe un autre moyen qui fonctionne si cela ne vous dérange pas de ne cibler que les navigateurs les plus récents. Il suffit d'ajouter le fichier CSS

pointer-events: none;

à tous les enfants de la division que vous voulez capturer le clic. Voici les tableaux de support

http://caniuse.com/#feat=pointer-events

Answer 4

Vous pouvez utiliser le bouillonnement en votre faveur :

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

Answer 5

//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

Cela arrêtera la propagation (bouillonnement) de la click sur l'un des éléments enfants de l'élément .foobar afin que l'événement n'atteigne pas l'élément .foobar pour déclencher leur(s) gestionnaire(s) d'événements.

Voici une démo : http://jsfiddle.net/bQQJP/