Question

看似简单的问题：我正在开发一个具有扩展“帮助”（实际上是div）的Chrome扩展程序，该功能可以通过菜单操作显示。现在，我希望当用户在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"，但是我无法使其在这种情况下起作用。

Answer 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;
    }
   });
 });

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

1 个答案: