"If not div" onclick事件不包括儿童div

Question

使用vanilla js，我正在尝试创建一个单击 - 如单击正文而不是单击的某些元素，请关闭该元素。

但是，当您单击指定元素（不关闭）时，它可以工作，但是当您单击该元素的任何子节点时，它会发射事件。我希望if语句包括该父元素的任何子节点以及父节点本身。

html：

<ul id="NavSocial-target" class="Nav_social">
    <li class="Nav_social_item">Facebook</li>
    <li class="Nav_social_item">Twitter</li>
    <li class="Nav_social_item">Google</li>
</ul>
<ul class="Nav_options FlexList">
    <li class="Nav_options_item FlexList_item" id="NavSocial-trigger">Social</li>
    <li class="Nav_options_item FlexList_item">Curr/Lang</li>
</ul>

javaScript：

this.triggerDOM =  document.getElementById('NavSocial-trigger');
this.targetDOM =  document.getElementById('NavSocial-target');
// If not list item that triggers model && if not model itself
document.getElementsByTagName('body')[0].onclick = (e) => {
    if(e.target !== this.triggerDOM && e.target !== this.targetDOM){
        this.removeClass();
    }  
};

Answer 1

我假设 this.triggerDOM是您要忽略的元素。您需要查看单击是否通过元素传递，并带有一个循环：

this.triggerDOM =  document.getElementById('NavSocial-trigger');
// ...
document.body.addEventListener("click", e => {
    var element = e.target;
    while (element && element !== document.body) {
        if (element === this.triggerDOM) {
            // It was a click in `this.triggerDOM` or one of its
            // children; ignore it
            return;
        }
        element = element.parentNode;
    }
    // It wasn't a click anywhere in `this.triggerDOM`
    this.removeClass();
}, false);

上面的旁注：

• document.getElementsByTagName("body")[0]写document.body只是很长的路要走： - ）
• 使用onclick与他人的玩法不佳；使用addEventListener（如果您仍然需要认真支持过时的浏览器，则在IE8和更早的IE8上使用attachEvent）。
• 箭头功能接受单个参数不需要参数列表周围的()（尽管您喜欢样式，当然可以将它们放在那里）。

---

工作示例：

this.triggerDOM = document.getElementById('NavSocial-trigger');
// ...
document.body.addEventListener("click", e => {
  var element = e.target;
  while (element && element !== document.body) {
    if (element === this.triggerDOM) {
      // It was a click in `this.triggerDOM` or one of its
      // children; ignore it
      return;
    }
    element = element.parentNode;
  }
  // It wasn't a click anywhere in `this.triggerDOM`
  this.triggerDOM.parentNode.removeChild(this.triggerDOM);
}, false);

#NavSocial-trigger {
  border: 1px solid #ddd;
  background-color: #dd0;
}

<!-- Note the really deep nesting -->
<div><div><div><div><div><div><div><div><div><div>
  Click
  <div>
    anywhere
    <div>
      on
      <div>
        this
        <div>
          page
          <div>
            except
            <div id="NavSocial-trigger">
              here
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div></div></div></div></div></div></div></div></div>