onClickOut (nhấp sau khi rời khỏi phần tử)

Question

Vấn đề là tôi cần một "onClickOut" -Event.

Ví dụ: Bạn có chế độ xem DIV khi di chuột qua (onMouseOver) một số Nút hoặc bao giờ.

Nếu bạn bấm vào bên ngoài phần tử cần ẩn, nhưng nếu bạn nói $ ("nội dung"), hãy bấm nó cũng sẽ bị ẩn khi bạn bấm vào chính phần tử đó. :/

Bây giờ tôi lắng nghe vị trí chuột và khi mouseleave() Tôi đặt var khi nhấp vào phần tử của mình. Trong bước tiếp theo, tôi nghe một sự kiện nhấp chuột (cơ thể) nhưng tôi hỏi nếu var đã được thiết lập. Nếu nó không phải là một nhấp chuột bên ngoài phần tử của tôi, vì vậy tôi có thể ẩn phần tử của mình.

Tôi hy vọng bạn có thể sử dụng nó:

$("#schnellsuche_box").mouseleave(function() { 
    var inside; 
    $("#schnellsuche_box").click(function() { 
     inside = true; 
    }); 
    $("body").click(function() { 
     if(!inside) { 
      $("#schnellsuche_box").hide(); 
     } 
    }); 
    delete inside; 
}); 

Answer 1

Bạn làm điều đó bằng cách lắng nghe một nhấp chuột vào mức độ tài liệu, và bên trong xử lý sự kiện bạn kiểm tra nếu các yếu tố nhấp là #schnellsuche_box hoặc bất kỳ yếu tố bên trong #schnellsuche_box bằng cách sử dụng closest(), như vậy:

$(document).on('click', function(e) { 
    if (! $(e.target).closest('#schnellsuche_box').length) 
     $('#schnellsuche_box').hide(); 
}); 

FIDDLE

Answer 2

Bạn cần phải dừng sự kiện #schnellsuche_box nhấp chuột từ bọt lên đến sự kiện click body (đó là công tác tuyên truyền sự kiện mặc định) bằng cách làm return false:

$("#schnellsuche_box").click(function() { 
    inside = true; 

    return false; 
}); 

Answer 3

Hãy thử cách này:

$("body").click(function(e) { 
    var $target = $(e.target); 
    if (!$target.is('#schnellsuche_box') && 
     !$target.parents('#schnellsuche_box').length) { 
     alert('outside'); 
    } 
}); 

Answer 4

$("#schnellsuche_box").on("click",function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
});