将事件处理程序附加到除一个及其后代之外的所有元素答案

【问题标题】：Attach event handler to all elements except one and its descendants将事件处理程序附加到除一个及其后代之外的所有元素
【发布时间】：2019-04-17 18:50:33
【问题描述】：

看似简单的问题：我正在开发一个 Chrome 扩展程序，它有一个帮助“窗口”——实际上是一个 div——在菜单操作时显示。现在我希望当用户在div 之外单击时再次隐藏div。因此，任何对div 或其后代元素的点击都应被忽略，所有其他点击都应触发div 的隐藏。这是我发现的唯一可行的解决方案，但它是如此不优雅和间接（稍后编辑：此代码可防止单击其他元素生效，因此它除了是笨拙）。

 <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    var flag = 0;//controls whether hiding is allowed

        $("#div1").click(function(){//clicks on div1 should be ignored
          flag = 1;//prevent hiding by third function
        });

        $("#div1").find("*").click(function(){//clicks on descendants of div1 should be ignored 
          flag = 1;//prevent hiding by third function
        });

        $("*").click(function(){//captures all clicks
          if(flag == 1){flag = 0;}//reset flag for next event
          else {$("#div1").hide();}//if allowed, hide
        return false;
        });        
    });
    </script>
    </head>
    <body>    

    <div id="div1" style="border:1px solid black;padding:10px;">
      <p>This is a div. It should go away when you click outside of it.</p>
    </div>
    <p></p>
    <div id="div2" style="border:1px solid black;padding:10px;">
      <p>This is another div. <span>If you click on it, or anywhere else outside of the div above, that div should go away.</span></p>
    </div>

    </body>
    </html>

我确信有更好的解决方案。我看过以前的帖子 "Select all elements that are not descendant of a certain class" 和 "Use jQuery to get descendants of an element that are not children of a container with a certain CSS class"，但我无法让它们在这种情况下工作。

【问题讨论】：

如果代码按原样工作，并且您可以展示一个工作示例，并且您正在询问是否有办法让它变得更好，那么这与 Stack Overflow 无关，您应该考虑将问题发布到codereview.stackexchange.com
您可以为要忽略的后代设置一个类，然后设置一个 if ：if($(this).hasClass('yourClass'))
事件委托会比添加的所有点击处理程序好得多。
stackoverflow.com/questions/152975/…
@epascarello：感谢您的参考。 closest 选择器成功了：if($(this).closest("#div1").length == 0){$("#div1").hide();} [api.jquery.com/closest/]

标签： jquery html

【解决方案1】：

这似乎最终会奏效；上面的代码确实通过阻止后续点击产生了一些意想不到的结果，所以我认为将问题保留在 StackOverflow 上是可以的。

 $(document).ready(function(){
    $("*").click(function(){
    if($(this).closest("#div1").length == 0) {
      if($("div#div1").css("display") != "none"){
        $("div#div1").hide();
        return false;
      }
    } else {
      return false;
    }
   });
 });

【讨论】：