Tıklama etkinliği SADECE ebeveyn DIV'de değil, çocuklarda nasıl tetiklenir?

Sınıflandırılmış bir DIV var foobarve bu DIV içinde sınıflandırılmamış birkaç DIV var, ama sanırım onlar foobarsınıfı miras :

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

Sadece DIV'de bir yere tıkladığınızda ateş etmesini istiyorum ama çocuklarının DIV'lerine değil.

Eğer e.targetaynı unsurdur this, bir soydan tıklanmayan ettik.

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

Yalnızca daha yeni tarayıcıları hedeflememeniz durumunda çalışan başka bir yol daha vardır. Sadece CSS'yi ekleyin

pointer-events: none;

div'in herhangi bir çocuğuna tıklamayı yakalamak istersiniz. İşte destek tabloları

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

Köpürmeyi kendi lehinize kullanabilirsiniz:

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

İşe kabul edilen cevabı alamadım, ama bu en azından vanilya JS'de hile yapıyor gibi görünüyor.

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

Bu, clickolayın unsur (lar) ın alt öğelerinden herhangi birinde yayılmasını (köpürmesini) durduracak, .foobarböylece olay, .foobarolay işleyicilerini çalıştırmak için öğelere ulaşmayacaktır .

İşte bir 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
})

Aynı sorunu yaşadım ve bu çözümü buldum (diğer cevaplara dayanarak)

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

Temel olarak, hedef div ise kodu çalıştırır, aksi takdirde hiçbir şey yapmaz (gizlemeyin)

Benim durumum benzer, ancak birkaç tane olduğunda foobarve yalnızca bir tıklamada bir tıklatmak istediğinizde bu durum söz konusudur :

Ana vakayı bul

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

Alt vakayı bul

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

Event.currentTarget kullanabilirsiniz. Sadece etkinlik olan tıklama etkinliğini yapar.

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

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

pointer-events: none;Modern tarayıcıları kullanamıyorsanız ve hedefliyorsanız composedPath, nesneye doğrudan bir tıklamayı algılamak için kullanabilirsiniz :

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

CombinedPath hakkında daha fazla bilgiyi buradan edinebilirsiniz: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath