¿Cómo hacer que el evento de clic SOLO se active en DIV para padres, no para niños?

Tengo un DIV con una clase foobar, y algunos DIV dentro de ese DIV que no están clasificados, pero supongo que están heredando la foobarclase:

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

Quiero que se active solo cuando haga clic en algún lugar del DIV pero no en sus DIV secundarios.

Si el e.targetes el mismo elemento que this, no ha hecho clic en un descendiente.

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

Hay otra forma que funciona si no te importa solo apuntar a navegadores más nuevos. Solo agrega el CSS

pointer-events: none;

a cualquier hijo del div que desee capturar el clic. Aquí están las tablas de soporte.

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

Puedes usar el burbujeo a tu favor:

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

No obtuve la respuesta aceptada para trabajar, pero esto parece funcionar, al menos en vanilla 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)
});

Esto detendrá la propagación (burbujeo) del clickevento en cualquiera de los elementos secundarios del .foobarelemento (s) para que el evento no llegue al.foobar elementos para activar sus controladores de eventos.

Aquí hay una demostración: 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
})

Tuve el mismo problema y se me ocurrió esta solución (basada en las otras respuestas)

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

Básicamente dice que si el objetivo es el div, ejecute el código; de lo contrario, no haga nada (no lo oculte)

Mi caso es similar, pero esta es una ocasión en la que tienes pocos foobar -s y desea cerrar solo uno por cada clic:

Encuentra el caso de los padres

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

Encontrar caso de niño

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

Puede usar event.currentTarget. Solo hará clic en el evento elemnt que obtuvo el evento.

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

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

Si no puede usar pointer-events: none;y está apuntando a navegadores modernos, puede usar composedPathpara detectar un clic directo en el objeto de la siguiente manera:

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

Puede leer más sobre compositePath aquí: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath