jquery：单击除某个节点以外的任何节点的回调

Question

我正在尝试编写一个单击回调函数，如果你单击任何地方但是标题。现在这是我的DOM结构：

我瞄准.wrapper-main和footer就像这样（下图），因为这些元素不是header。但我希望有一个更通用的方式，所以，如果你在没有header和.wrapper-main的另一页上有相同的footer，你点击任何地方但是header它会执行点击回调，closeNavOnMobile。

$('.wrapper-main').click( function () {
  closeNavOnMobile();
});

$('footer').click( function () {
  closeNavOnMobile();
});

function closeNavOnMobile(){
  // slide up the mobile nav menu 
}

Answer 1

我为我当前的项目使用这样的代码。它会触发文档中的所有点击。但是使用一个简单的if来过滤掉header和headers子元素。

$(document).click(function(e) {
    var header =  $(".header-main");

    if (!header.is(e.target) && header.has(e.target).length === 0) {
        closeNavOnMobile()
    }
});

Answer 2

检查目标元素的nodeName属性。如果它不是标题，则执行该函数。请尝试以下方法：

$('body').click(function(event) {
  if (event.target.nodeName != 'HEADER') {
    closeNavOnMobile();
  }
});

Answer 3

当然，只需检查event.target是否在标题内。

function closeNavOnMobile(event) {
  if (document.querySelector("header").contains(event.target)) {
    return; // In the header, so exit the function
  } 

  // the rest of your code.
  alert("CLICKED");
}

document.body.addEventListener("click", closeNavOnMobile);

header {
  height: 100px;
  background: orange;
}
.wrapper-main {
  height: 200px;
  background: pink;
}
footer {
  height: 100px;
  background: teal;
}

<header>
 HEADER PREVENT CLICKS IN HERE
</header>
<div class="wrapper-main">WRAPPER</div>
<footer>FOOTER</footer>

如果你愿意，你可以在jQuery中做类似的事情。