Skip to content

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

@wingmeng

Description

@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 方法

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions