jQuery: Bấm vào * chỉ * yếu tố này

Question

Trong bản vẽ cao nghệ thuật trên, hình vuông màu xanh lá cây là một đứa trẻ của một màu hồng. Một màu hồng được bao quanh bởi màu xanh lá cây bởi chức năng của tôi, vì vậy hình vuông màu xanh lá cây có thể là bất cứ thứ gì - siêu liên kết, hình ảnh, nút, v.v.

Tôi muốn chụp một nhấp chuột vào div màu hồng CHỈ nếu nó không phải là ' t nhấp vào phần tử màu xanh lá cây.

Điều này có thể được thực hiện bằng cách lật Boolean bằng mouseenter trên hình vuông màu xanh lục, nhưng điều đó có vẻ là một cách lộn xộn để làm điều đó với tôi.

Bất kỳ manh mối nào?

QUAN TRỌNG QUAN TRỌNG: Tôi không thể gây rối với hình vuông màu xanh lá cây, vì vậy không thêm bất kỳ thứ gì vào sự kiện nhấp chuột.

Answer 1

Bạn có thể làm điều này:

$('.pink-box-selector').click(function(e) { 
    if ($(e.target).is('.pink-box-selector')) { 
     // do stuff here 
    } 
}); 

Answer 2

Trợ giúp $("#div_id :not('#excluded_element')).click(); có giúp được không? http://api.jquery.com/not-selector/

Answer 3

Thiết lập một event listener nhấp chuột riêng cho các yếu tố "xanh" và có nó event.preventDefault()

Answer 4

Hai tùy chọn. Trước tiên, bạn có thể kiểm tra xem mục tiêu có phải là div màu xanh lục hay không.

$('#pinkdiv').click(function(e) { 
    if ($(e.target).is('#greendiv')) return; 
    // handle the event 
}); 

Hoặc bạn có thể viết trình xử lý nhấp chuột cho div màu hồng bình thường và ngừng nhấp chuột vào div màu xanh lá cây để nhân giống.

$('#greendiv').click(function(e) { 
    e.stopPropagation(); 
}); 

Answer 5

http://jsfiddle.net/rlemon/d8qVp/

$("#pink").click(function(){ 
    if(!$("#green").is(":hover")) { 
     alert('here'); 
    } 
});