Làm cách nào để kích hoạt sự kiện nhấp chuột trên DIV gốc chứ không phải trẻ em?

Question

Tôi có một DIV với một phân loại foobar, và một vài DIV bên trong DIV mà unclassed, nhưng tôi cho rằng họ đang kế thừa lớp foobar:

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

Tôi muốn điều đó để bắn ra chỉ khi bấm vào vị trí các DIV nhưng không phải trên con của nó DIV.

Answer 1

Nếu e.target là cùng một yếu tố như this, bạn chưa nhấp vào 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>

Answer 2

//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 chặn sự lan truyền (bọt) của sự kiện click vào bất kỳ yếu tố trẻ em (s) của .foobar phần tử (s) để sự kiện này sẽ không đạt được các thành phần .foobar để kích hoạt trình xử lý sự kiện của họ.

Đây là một bản demo: http://jsfiddle.net/bQQJP/

Answer 3

Bạn có thể sử dụng bọt ủng hộ của bạn:

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

Answer 4

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

Answer 5

Có một cách khác mà làm việc nếu bạn không nhớ 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ỳ trẻ em nào của div bạn muốn nắm bắt nhấp chuột. Dưới đây là các bảng hỗ trợ

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

Answer 6

tôi đã cùng một vấn đề và đưa ra giải pháp này (dựa trên 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 sau đó chạy mã khác không làm gì cả (đừng giấu nó)