Làm thế nào để có sự kiện click CHỈ bắn vào cha mẹ DIV chứ không phải con?

Tôi có một DIV với một lớp được phân loại foobarvà một vài DIV bên trong DIV đó không được phân loại, nhưng tôi cho rằng chúng đang kế thừa foobarlớp:

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

Tôi muốn điều đó chỉ tắt khi nhấp vào một nơi nào đó trong DIV chứ không phải trên các DIV con của nó.

Nếu e.targetlà phần tử giống như this, bạn đã không nhấp vào một hậu duệ.

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

Có một cách khác hoạt động nếu bạn không chỉ nhắm mục tiêu các trình duyệt mới hơn. Chỉ cần thêm CSS

pointer-events: none;

cho bất kỳ đứa trẻ nào của div mà bạn muốn chụp. Đây là bảng hỗ trợ

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

Bạn có thể sử dụng bong bóng có lợi cho bạn:

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

Tôi đã không nhận được câu trả lời được chấp nhận để làm việc, nhưng điều này dường như thực hiện mánh khóe, ít nhất là trong 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)
});

Điều này sẽ ngăn sự lan truyền (sủi bọt) của clicksự kiện trên bất kỳ phần tử con nào của (các) .foobarphần tử để sự kiện không đến được .foobarphần tử để xử lý (các) phần tử xử lý sự kiện của chúng.

Đây là bản 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
})

Tôi đã có cùng một vấn đề và đưa ra giải pháp này (dựa trên các câu trả lời khác)

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

Về cơ bản nó nói nếu mục tiêu là div thì hãy chạy mã nếu không làm gì cả (đừng ẩn nó)

Trường hợp của tôi cũng tương tự nhưng đây là dịp bạn có vài foobargiây và bạn chỉ muốn đóng một - mỗi lần nhấp:

Tìm trường hợp cha mẹ

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

Tìm trường hợp con

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

Bạn có thể sử dụng event.cienTarget. Nó sẽ làm click click chỉ elemnt ai có sự kiện.

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

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

Nếu bạn không thể sử dụng pointer-events: none;và đang nhắm mục tiêu các trình duyệt hiện đại, bạn có thể sử dụng composedPathđể phát hiện nhấp chuột trực tiếp vào đối tượng như vậy:

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

Bạn có thể đọc thêm về compPath tại đây: https://developer.mozilla.org/en-US/docs/Web/API/Event/composesPath