第 41 期W3C标准-JavaScript-DOM)：点击空白处检测

[wingmeng]

题目：

<div id="box">
  <h2>酱油君1</h2>
  <p>酱油君2</p>
  <div>
    <input type="text">
    <button>按钮</button>
  </div>
</div>

#box {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 300px;
  padding: 1em;
  background: #f5f5f5;
  border: 1px solid #ccc;
}

请编写一个方法，实现点击 #box（含内部元素）时，浏览器控制台输出 "inner"，点击 #box 外部空白处时输出 "outer"

---

参考答案：

const box = document.getElementById('box');

window.addEventListener('click', e => {
  let elm = e.target;

  if (elm === box || box.contains(elm)) {  // 自身或内部元素
    console.log('inner');
  } else {
    console.log('outter');
  }
});

Node.contains 方法