关于javascript：onClickOut（离开元素后点击）


onClickOut (click after leaving the element)

本问题已经有最佳答案，请猛点这里访问。

问题是我需要一个"onclickout"活动。

例如：在悬停(鼠标悬停)时有一个DIV视图，可以查看某个按钮或任何其他按钮。

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

现在我听mouseposition，当mouseleave()时，我在点击我的元素时设置了一个var。在下一步中，我将听取一个一般性的单击事件(body)，但我会询问是否设置了var。如果不是的话，它必须是在我的元素外单击，这样我才能隐藏我的元素。

希望您能使用它：

1
2
3
4
5
6
7
8
9
10
11
12
$("#schnellsuche_box").mouseleave(function() {
    var inside;
    $("#schnellsuche_box").click(function() {
        inside = true;
    });
    $("body").click(function() {
        if(!inside) {
            $("#schnellsuche_box").hide();
        }
    });
    delete inside;
});
相关讨论

您可以通过在文档级别上单击来执行此操作，在事件处理程序中，您可以使用closest()检查单击的元素是#schnellsuche_box还是#schnellsuche_box中的任何元素，如下所示：

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

小提琴

您需要通过执行return false来阻止#schnellsuche_box单击事件从冒泡到body单击事件(这是默认事件传播)：

1
2
3
4
5
$("#schnellsuche_box").click(function() {
    inside = true;

    return false;
});
相关讨论

1
2
3
4
$("#schnellsuche_box").on("click",function(event) {
  event.preventDefault();
  event.stopPropagation();
});
相关讨论

试试这个：

1
2
3
4
5
6
7
$("body").click(function(e) {
   var $target = $(e.target);
   if (!$target.is('#schnellsuche_box') &&
       !$target.parents('#schnellsuche_box').length) {
       alert('outside');
   }
});