javascript - Jquery 事件 - 如何选择不包括某些内部区域的整个 DIV

Question

考虑以下 HTML 代码来应用 Jquery:

HTML代码:

<div id="outer_div">
  <div id="inner_div_1"></div>
  <div id="inner_div_2"></div>
  <div id="inner_div_3"></div>
</div>

默认情况下，“outer_div”是隐藏的。它在使用 Jquery show() 函数单击按钮时出现。 我想执行以下操作:在“outer_div”的任何地方(不包括“inner_div_1”内的区域)单击时，“outer_div”将再次被隐藏。我在尝试以下代码时失败了。我应该修改什么？

尝试的 Jquery 1:

$("#outer_div:not(#inner_div_1)").on("click",function(){
    $("#outer_div").hide("slow");
});

尝试 Jquery 2:

$("#outer_div").not("#inner_div_1").on("click",function(){
    $("#outer_div").hide("slow");
});

非常感谢您的支持。

Answer 1

您需要考虑在内层 div 中的点击也是外层 div 的点击。也就是说，您只需要检查目标和目标 parent :

$("#outer_div").on("click",function(e){
    if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});