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

Question

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

我定位.wrapper-main和footer就像这样（下图），因为这些元素不是header。但是我希望可以采用更通用的方式，这样如果你在另一个没有header和.wrapper-main的网页上有同样的footer并且你点击了header那么closeNavOnMobile 1}}它会执行点击回调$('.wrapper-main').click( function () { closeNavOnMobile(); }); $('footer').click( function () { closeNavOnMobile(); }); function closeNavOnMobile(){ // slide up the mobile nav menu } 。

int amountOfProjectiles = 8;
if (Input.GetButtonDown("Fire1"))
    {
        for(int i = 0; i < amountOfProjectiles; i++)
        {
            ShotgunRay();
        }
    }

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

当然，只需检查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中做类似的事情。

Answer 3

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

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