Làm cách nào để sử dụng jQuery để xác định xem sự kiện nhấp có kích hoạt trong một phần tử cụ thể không?

Question

Tôi đang sử dụng mã sau để tạo hoạt ảnh cho một khối. Trong mã của tôi, div_animate() về cơ bản ẩn một số <div> với bộ chọn được chỉ định nếu nó hiện đang hiển thị.

$(document).click(function(event){ 
    div_animate("#container"); 
}); 

tôi cần phải xác định xem người dùng nhấp vào một đứa trẻ của #container và nếu như vậy, return false; - như xa như tôi có thể nói, các mã này sẽ giống như thế này:

$(document).click(function(event){ 
    if (/* the event's target has a parent of #container */) { 
     return false; 
    } else { 
     div_animate("#container"); 
    } 
}); 

Bất kỳ suy nghĩ nào?

Answer 1

Điều đơn giản nhất sẽ là:

if ($(event.target).is('#container *, #container')) // edited - thanks @gnarf 
    // is a child 
else 
    // is not a child 

Có những lựa chọn khác nhau mà bạn có thể làm cho việc phát hiện cho dù đó là một đứa trẻ trong những mục tiêu (hoặc không phải mục tiêu) chứa; đó chỉ là một. Một thay thế:

if ($(event.target).closest('#container').length) 

Answer 2

Bạn có thể ngăn chặn hành động nếu nhấp chuột có nguồn gốc trên hoặc trong #container, như thế này:

$(document).click(function(event){ 
    var c = $("#container")[0]; 
    if (event.target == c || $.contains(c, event.target)) { 
     return false; 
    } else { 
     div_animate("#container"); 
    } 
}); 

Các kiểm tra đầu tiên là nếu nó đến từ #container bản thân, thứ hai là nếu nó đến từ một đứa trẻ, rằng #container$.contains(). Một cách đơn giản hoàn toàn thay thế là chỉ cần ngăn chặn bong bóng lên đến document khi nhấp vào #container, như thế này:

$("#container").click(function(e) { 
    e.stopPropagation(); 
}); 
$(document).click(function() { 
    div_animate("#container"); 
});