Como ter o evento de clique APENAS acionado no DIV pai, não nos filhos?

Eu tenho um DIV com um DIV classificado foobare alguns DIV dentro desse DIV que não são classificados, mas suponho que eles estejam herdando a foobarclasse:

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

Quero que isso seja acionado apenas ao clicar em algum lugar no DIV, mas não nos DIVs filhos.

Se o e.targetmesmo for o elemento que thisvocê não clicou em um descendente.

$('.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>

Existe outra maneira de funcionar, se você não se importa de segmentar navegadores mais recentes. Basta adicionar o CSS

pointer-events: none;

a qualquer filho da div que você deseja capturar o clique. Aqui estão as tabelas de suporte

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

Você pode usar bolhas a seu favor:

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

Não recebi a resposta aceita para o trabalho, mas isso parece funcionar, pelo menos no JS vanilla.

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)
});

Isso interromperá a propagação (subida) do clickevento em qualquer um dos elementos filhos do (s) .foobarelemento (s), para que o evento não atinja o .foobar(s) elemento (s) para disparar seus manipuladores de eventos.

Aqui está uma demonstração: 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
})

Eu tive o mesmo problema e surgiu com esta solução (com base nas outras respostas)

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

Basicamente, diz que se o destino é a div, execute o código, caso contrário não faça nada (não o oculte)

Meu caso é semelhante, mas é a ocasião em que você tem poucos foobar-s e deseja fechar apenas um - por um clique:

Localizar caso pai

$(".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'
});

Localizar caso filho

$(".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'
});

Você pode usar event.currentTarget. Ele fará clique apenas no evento que não obteve o evento.

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

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

Se você não pode usar pointer-events: none;e está direcionando navegadores modernos, pode composedPathdetectar um clique direto no objeto da seguinte maneira:

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

Você pode ler mais sobre o composPath aqui: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath