Question

建立一个包含他人作品的网站。我想知道我的背景是否收到点击，他们是否点击了按钮之类的东西或带有点击处理程序的东西。我知道如何阻止事件传播，但是我不想在其代码中要求这样做。您如何建议我处理该问题，以查看他们是否单击了文档中的某些内容，但想知道他们是否单击了交互式内容中已经对响应做出响应的元素？

Answer 1

如果我正确地阅读了您的问题，您想对某些元素执行操作，只要它们不嵌套在具有单击功能固有的元素中？

在这种情况下，您可以递归检查所有标签类型

function handleClick(e) {
  const target = e.target;

  function recursive(node) {
    if (node.id === "stop") return true;
    if (["A", "BUTTON"].indexOf(node.tagName) > -1) return false;

    return recursive(node.parentNode)
  }

  console.log(recursive(target));
}

body {
  width: 100%;
  height: 100%;
  background: lightgray;
  display: flex;
  flex-direction: column;
}

div,
a {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100px;
  background: gray;
}

a {
  background: darkgray;
}

p {
  width: 100%;
  background: white;
}

button {
  width: 80px;
}

<body id="stop" onclick="handleClick(event)">
  body
  <a>
        anchor
        <button>buttonA</button>
        <p>textA</p>
      </a>
  <div>
    div
    <button>buttonB</button>
    <p>textB</p>
  </div>
</body>

textB应该在div中返回true，而textA应该在锚点中则返回false。

如何检测onclick事件是否已由孩子处理

1 个答案: