javascript - onClickOut（离开元素后点击）

Question

问题是我需要一个"onClickOut"-Event。

例如：您有一个 DIV 查看悬停（onMouseOver）某个按钮或其他任何东西。

如果您在元素外部单击它需要隐藏，但如果您说$("body").click当您单击元素本身时它也将被隐藏。：/

现在我听mouseposition，当mouseleave（）时，我在点击我的元素时设置了一个var。在下一步中，我通常会听一个单击事件（正文），但我会询问是否设置了 var。如果不是，则必须在我的元素之外单击，以便我可以隐藏我的元素。

我希望你可以使用它：

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

Answer 1

您可以通过收听文档级别的单击来做到这一点，并在事件处理程序中使用 来检查单击的元素是还是其中的#schnellsuche_box任何元素，如下所示：#schnellsuche_boxclosest()

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

小提琴

Answer 2

您需要通过执行以下操作来阻止#schnellsuche_box点击事件冒泡到body点击事件（这是默认事件传播）return false：

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

    return false;
});

Answer 3

试试这个：

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