时间戳

首页 > 解决方案 > 在元素外部单击的代码未触发

javascript - 在元素外部单击的代码未触发

问题描述

这是我的代码：

<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"，文本“这里的信息”应该隐藏。我的代码的第二部分无法实现这一点。我不确定我做错了什么。请帮我解决这个问题。

标签： javascriptjqueryjquery-events

解决方案

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

第二个逻辑绑定到正文，并检查单击的元素是否是.clk1或 的子元素.here。如果它不是任何一个的孩子，它将隐藏.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>

推荐阅读