onClickOut（离开元素后点击）[重复]答案

【问题标题】：onClickOut (click after leaving the element) [duplicate]onClickOut（离开元素后点击）[重复]
【发布时间】：2013-08-23 15:36:04
【问题描述】：

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

例如：你有一个 DIV 查看悬停（onMouseOver）一些按钮或任何东西。

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

现在我监听鼠标位置，当 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;
});

【问题讨论】：

注意：你不能delete一个局部变量。（但即使可以，这里也没有任何意义，因为您的点击处理程序会尝试使用该变量。）

标签： javascript jquery

【解决方案1】：

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

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

    return false;
});

【讨论】：

event.stopPropogation(); 也可以，我被告知 return false 只有在 jquery 回调中使用时才会停止冒泡
@rps 是的，这会起作用，但这不是 jQuery 独有的，它也适用于 JavaScript。
我不确定您的评论中的“它”指的是什么“它也只适用于 JavaScript”，但如果它是 return false;，那么它会只阻止“非jQuery”事件处理程序中的默认事件，而不是事件传播。
认为他的意思是 native-JS (non-jQuery) //event.stopPropogation()

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

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

【讨论】：

@F4r-20 你不必，event 指的是当前的 JavaScript 事件。
我不知道，谢谢。
@mattytommo - 至少在您使用 IE 和某些版本的 Chrome 时可以。它应该被定义为一个参数。
这将在较旧的 IE 版本（不支持 stopPropogation）和 Firefox（不提供全局 event 对象）中失败。定义事件处理程序，使其接受 `event 作为第一个参数，它会正常工作。 jQuery 将增强的事件对象传递给事件处理程序，从而解决了这些浏览器差异。
@FelixKling 现在好吗？

【解决方案4】：

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

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

FIDDLE

【讨论】：