单击元素外部的代码不触发

Question

这是我的代码：

<div class="titfx">
    <div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
    $('.clk1').on("click", function(event) {
        //first code
        var here = $(this).parent(".titfx").next(".here");
        here.toggle();
        //second code
        if (!here.is(event.target) && here.has(event.target).length === 0) {
            here.hide();
        }
    });
});
</script>

javascript 代码的第一部分做什么：单击单词 "CLICKME" 时，将显示带有文本 "info for here" 的隐藏 div。

javascript 代码的第二部分 应该做什么：当点击屏幕上不是 class="here" 的任何部分时，然后文本"info for here" 应该隐藏。我的代码的第二部分无法实现。我不确定我做错了什么。请帮我解决这个问题。

Answer 1

这是一个可能的解决方案。第一次点击绑定适用于切换逻辑。但是，对于您的第二种情况，您说如果他们单击页面上的任何位置而不是这两个区域，您希望它关闭它们。在这方面，您关心的是 body 的点击事件，而不仅仅是这两个区域。

第二个逻辑绑定到 body，并检查单击的元素是否是 .clk1 或 .here 的 child。如果它不是任何一个的 child，它将隐藏 .here.

添加了 css 以强制页面大小比提供的 html 更大，因此您实际上可以点击 而不是 的内容， :)

$(document).ready(function() {
    $('.clk1').on("click", function(event) {
        var here = $(this).parent(".titfx").next(".here");
        here.toggle();
    });
    
    $(document.body).on('click', function(event){
      var clickedElement = $(event.target);
      
      if (!clickedElement.closest('.clk1').length
      &&  !clickedElement.closest('.here').length) {
        $('.here').hide();
      }
    });
});

body {
 min-width: 800px;
 min-height: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
    <div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>

Answer 2

您需要绑定两个事件侦听器才能实现此目的，一个用于 "clk1" 元素，一个用于整个页面。

当触发文档点击事件时，只隐藏文本，

当触发“.clk1”点击元素时，您需要先停止传播，然后再编写切换行为。

这是我的解决方案

$(document).ready(function() {
  $('.clk1').on("click", function(event) {
    //first code
    event.stopPropagation();
    $(".here").toggle();
  });
    
  //second code
  $(document).on("click", function(event){
    $(".here").hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
  <div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>

单击元素外部的代码不触发

Code to click outside of element not firing

javascript

jquery

jquery-events