Question

我在通过单击屏幕上的任意位置来确定如何关闭div时遇到了麻烦。

我当前正在切换“活动”类以显示下拉div，然后尝试通过单击正文删除该类：

$(document).ready(function () {

    $('.navbar a').click(function () {
        $(this).next('.navbar-dropdown').toggleClass('active');
    });

    $(body).click(function() {
        if($('.navbar-dropdown').hasClass('active')){
            $('.navbar-dropdown').removeClass('active');
        }
    });

});

<ul class="navbar">
    <li>
        <a href="#">Link</a>
        <div class="navbar-dropdown">
            Dropdown Content
        </div>
    </li>
</ul>

但是，它们彼此冲突，因此，一旦打开该类，“主体”单击就会同时将其关闭。花了一些时间在这里看了几次，并遇到了这种方法：

$(document.body).click( function() {
    closeMenu();
});

$(".dialog").click( function(e) {
    e.stopPropagation();
});

但是，任何尝试将其配置为正常工作的尝试似乎都置若！闻！

Answer 1

导航栏上的click事件冒泡到主体，因此两个事件都触发。 stopPropagation()是防止这种情况的一种方法，但是您需要在导航栏链接的事件处理程序中执行此操作，因此它将停止该特定事件；不在您拥有的单独事件处理程序中。

您可能考虑进行的另一项更改是仅在需要时分配主体点击处理程序，而不是一直触发-在导航栏的点击处理程序中创建该处理程序，并在使用它时再次将其停用：

$(document).ready(function() {
  $('.navbar a').click(function(e) {
    var myDropdown = $(this).next('.navbar-dropdown');
    $('.navbar-dropdown.active').not(myDropdown).removeClass('active'); // close any other open dropdowns
    myDropdown.toggleClass('active'); // open this one
    $('body').click(function() {
      // no need for an if statement here, just use a selector that matches the active elements:
      $('.navbar-dropdown.active').removeClass('active');
      $('body').off('click'); // cancel the body's click handler when it's used
    });
    e.stopPropagation(); // prevent the navbar event from bubbling up to the body
  });
});

.active {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar">
  <li>
    <a href="#">Link</a>
    <div class="navbar-dropdown">
      Dropdown Content
    </div>
  </li>
    <li>
    <a href="#">Link 2</a>
    <div class="navbar-dropdown">
      Dropdown Content 2
    </div>
  </li>
    <li>
    <a href="#">Link 3</a>
    <div class="navbar-dropdown">
      Dropdown Content 3
    </div>
  </li>
</ul>

（（如果您可能需要在主体上使用多个单独的click事件处理程序，则可以为该事件命名空间，以便您可以控制要关闭的事件：

$('body').on("click.myNamespace", function() {
  // do other stuff
  $('body').off("click.myNamespace")
})

Answer 2

我完全按照您的意愿做，对我有用。您确定没有附加任何其他事件侦听器吗？还是菜单上的Z索引将其置于其他元素之下？

$(document).click(function(e) {
  $(".dialog").text('closed')
});

$(".dialog").click(function(e) {
  e.target.innerText = 'open';
  e.stopPropagation();
});

.dialog {
  width: 200px;
  height: 200px;
  background: antiquewhite;
  text-align: center;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="dialog">open</div>
</body>

</html>

使用jQuery单击任意位置并删除“活动”类

2 个答案: