gpt4 book ai didi

javascript - 为什么单击元素的子元素的填充会使该元素成为 event.target?

转载 作者:行者123 更新时间:2023-11-30 16:12:20 25 4
gpt4 key购买 nike

我认为这不可能发生。是否有一个众所周知的原因,我不知道,或者它是一个 Chrome 错误?当设备模式打开时,它会在 Chrome DevTools 中发生。重现步骤:

  1. > Open the demo .
  2. 在 Chrome 中打开 DevTools (F12)。
  3. 启用设备模式 (CTRL+SHIFT+M)。
  4. 重新加载页面 (F5) 以查看移动式滚动条。
  5. 单击红色子 div 的右边缘以查看“父”而不是“子”。

如果演示不可用,这里是完整的代码(不能作为片段使用):

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>

#parent {
background: yellow;
height: 200px;
overflow: auto
}
#child {
background: red;
height: 250px;
}


</style>
</head>
<body>

<div id="parent">
<div id="child"></div>
</div>

<script>

document.querySelector('#parent').addEventListener('click', function(event) {
alert(event.target.id);
});

</script>
</body>
</html>

最佳答案

这取决于您要为事件触发哪个元素。

您可以尝试切换到边距而不是填充,以便元素之间有一个边距,而不是子元素的填充。

您还可以尝试查看 event.currentTarget 以查看这是否是您打算捕获的内容。

这个其他StackOverflow question可能会有所帮助,因为它包含一个 JSFiddle 示例。

一个有用的图表可以是用于理解元素周围区域的盒子模型: enter image description here

关于javascript - 为什么单击元素的子元素的填充会使该元素成为 event.target?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36050353/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com