Comment faire pour que l'événement click se déclenche UNIQUEMENT sur le parent DIV, pas sur les enfants?

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

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

Je veux que cela ne se déclenche qu'en cliquant quelque part dans le DIV mais pas sur ses DIVs enfants.

Si le e.targetest 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>

Il existe une autre méthode qui fonctionne si cela ne vous dérange pas de cibler uniquement les nouveaux navigateurs. Ajoutez simplement le CSS

pointer-events: none;

à tous les enfants du div que vous souhaitez capturer le clic. Voici les tables de support

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

Vous pouvez utiliser le bullage en votre faveur:

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

Je n'ai pas obtenu la réponse acceptée au travail, mais cela semble faire l'affaire, au moins dans la vanille JS.

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

//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 (propagation) de l' clickévénement sur l'un des éléments enfants de l'élément ou des .foobaréléments afin que l'événement n'atteigne pas le.foobar éléments pour déclencher leur ou leurs gestionnaires d'événements.

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

$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

J'ai eu le même problème et j'ai trouvé cette solution (basée sur les autres réponses)

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

Fondamentalement, il dit que si la cible est le div, exécutez le code, sinon ne faites rien (ne le cachez pas)

Mon cas est similaire mais c'est l'occasion où vous en avez peu foobar -s et que vous ne souhaitez fermer qu'un seul - par un clic:

Trouver le cas parent

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

Trouver un enfant

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

Vous pouvez utiliser event.currentTarget. Il ne cliquera que sur l'événement qui a reçu l'événement.

target = e => {
    console.log(e.currentTarget);
  };

<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>

Si vous ne pouvez pas utiliser pointer-events: none;et ciblez des navigateurs modernes, vous pouvez utiliser composedPathpour détecter un clic direct sur l'objet comme ceci:

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

Vous pouvez en savoir plus sur compoundPath ici: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath