Javascript 为什么单击元素的填充'；s子元素使元素成为event.target？
我认为这不可能发生。是有一个我不知道的众所周知的原因，还是一个Chrome bug？当设备模式打开时，它在Chrome开发工具中发生。复制步骤：Javascript 为什么单击元素的填充'；s子元素使元素成为event.target？,javascript,Javascript,我认为这不可能发生。是有一个我不知道的众所周知的原因，还是一个Chrome bug？当设备模式打开时，它在Chrome开发工具中发生。复制步骤： 在Chrome（F12）中打开DevTools 启用设备模式（CTRL+SHIFT+M） 重新加载页面（F5）以查看移动样式滚动条 单击红色子div的右边缘以查看“父”而不是“子” 如果演示不可用，以下是完整代码（不能作为代码片段使用）： 演示 #母公司{ 背景：黄色； 高度：200px； 溢出：自动 } #孩子{ 背景：红色； 高度：250px；
演示
#母公司{
背景：黄色；
高度：200px；
溢出：自动
}
#孩子{
背景：红色；
高度：250px；
}
document.querySelector（“#parent”）.addEventListener（'click'，函数（事件）{
警报（event.target.id）；
});
因为有一个隐藏的滚动条，它属于父元素。为什么？这样做的效果如何？这是如何回答这个问题的？（“为什么单击元素的子元素的填充会使该元素成为event.target？”）如果我单击子元素的边距，我会毫不奇怪地看到父元素是目标。但是现在我正在单击填充区域（在DevTools中双击），所以我希望目标是子对象，而不是父对象。检查currentTarget显示“DIV”，可能是因为在所有其他元素之上有一个不透明度：0元素，指针事件：none。检查了上面提到的问题，但我认为这有所不同。如果您想在示例页面中捕获对LI的单击，为什么不将
document.querySelector（'termekek'）document.querySelector（'termekek LI'）var lis=document.querySelectorAll（'termekek li'）；对于（var i=0；i，因为太多的侦听器可能会杀死较弱的浏览器。相反，建议使用一个“伞式”侦听器，或者不管它叫什么。即使我使用的是单独的侦听器，我想填充仍然不会按它应该的方式处理：作为元素的一部分。（尚未测试）是否有一个地方可以看到所有代码？没有完整的图像很难诊断。可能是一个JSFIDLE？试图插入一个演示，但在这里效果很好。您仍然应该包含要复制的代码，即使这意味着我们必须将代码放在其他地方进行实际测试。只需确保包括测试所需的条件（浏览器、版本、设备等）。
<!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>