Wie kann ein Klickereignis NUR auf Eltern-DIV ausgelöst werden, nicht auf Kinder?

Ich habe einen DIV mit einer Klasse foobarund ein paar DIVs in diesem DIV, die nicht klassifiziert sind, aber ich nehme an, sie erben die foobarKlasse:

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

Ich möchte, dass das nur ausgelöst wird, wenn irgendwo im DIV geklickt wird, nicht aber auf die untergeordneten DIVs.

Wenn das e.targetdas gleiche Element ist wie this, haben Sie keinen Nachkommen angeklickt.

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

Es gibt eine andere Möglichkeit, die funktioniert, wenn es Ihnen nichts ausmacht, nur auf neuere Browser abzuzielen. Fügen Sie einfach das CSS hinzu

pointer-events: none;

an alle Kinder des Div, die Sie den Klick erfassen möchten. Hier sind die Support-Tabellen

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

Sie können das Sprudeln zu Ihren Gunsten verwenden:

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

Ich habe nicht die akzeptierte Antwort auf die Arbeit bekommen, aber dies scheint den Trick zu tun, zumindest in 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)
});

Dadurch wird die Ausbreitung (Blasenbildung) des clickEreignisses auf einem der untergeordneten Elemente des .foobarElements gestoppt, sodass das Ereignis die .foobarElemente nicht erreicht , um deren Ereignishandler auszulösen.

Hier ist eine Demo: 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
})

Ich hatte das gleiche Problem und fand diese Lösung (basierend auf den anderen Antworten)

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

Grundsätzlich heißt es, wenn das Ziel das Div ist, dann führen Sie den Code aus, sonst tun Sie nichts (verstecken Sie ihn nicht)

Mein Fall ist ähnlich, aber dies ist eine Gelegenheit, wenn Sie nur wenige foobar-s haben und nur eine schließen möchten - pro einen Klick:

Suchen Sie den übergeordneten Fall

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

Finden Sie einen Kinderfall

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

Sie können event.currentTarget verwenden. Es wird nur ein Klickereignis angezeigt, das ein Ereignis erhalten hat.

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

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

Wenn Sie pointer-events: none;moderne Browser nicht verwenden können und auf diese abzielen, können Sie composedPatheinen direkten Klick auf das Objekt wie folgt erkennen:

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

Weitere Informationen zu composPath finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath