在节点边距单击时返回节点-解网

问：

有这个代码，每个 P 标签用边距分隔：

document.addEventListener("click", function(e) {
  console.log(e.target);
});

* {
  box-sizing: border-box; 
}
div {
  height: 100px;
  border: 1px solid blue;
}
p {
  margin: 20px;
  border: 1px solid red;
}

<div>
  <p>
    Lorem
  </p>
  <p>
    Lorem 2
  </p>
</div>

当我捕获 P 标签之间的点击事件时，返回的节点是 DIV。点击P标签边距时如何返回P标签？我不被允许将边距更改为填充，这将是一个简单的解决方案。

javascript html dom 事件 click

margin不被视为元素的一部分，因此在与元素交互时不会触发任何事件。您可以在此演示中看到相同的问题，即直到您越过元素的边框/内容而不是填充物时才会触发：jsfiddle.net/su4ewqkg。要执行所需的操作，需要更改 HTML 和/或 CSS。:hover

0赞 Dom 6/23/2023

@RoryMcCrossan Margin 不是元素的一部分，但在元素上设置（在 CSS 中）是如此违反直觉。

1赞 Konrad 6/23/2023

相邻的边距折叠，因此不清楚应该单击哪个标签 developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/......p

答：

6赞 David Thomas 6/23/2023 #1

您可以利用伪元素，例如（在下面的示例中），以负插图定位：::before

document.addEventListener("click", function(e) {
  console.log(e.target);
});

* {
  box-sizing: border-box;
}

div {
  height: 100px;
  border: 1px solid blue;
}

p {
  margin: 20px;
  border: 1px solid red;
  isolation: isolate;
  position: relative;
}

p::before {
  background-color: transparent;
  content: '';
  inset: -10px;
  position: absolute;
  z-index: -1;
}

<div>
  <p>
    Lorem
  </p>
  <p>
    Lorem 2
  </p>
</div>

两个元素之间仍然有一个（小的）间隙，但这可以通过扩展伪元素来调整。::before

在节点边距单击时返回节点

Return node on node margin click

评论

评论