Question

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

Open the demo。
在Chrome中打开DevTools（F12）。
启用设备模式（CTRL + SHIFT + M）。
重新加载页面（F5）以查看移动样式滚动条。
点击红色子div的右边缘，查看＆＃34; parent＆＃34;相反＆＃34;孩子＆＃34;。

如果该演示不可用，则以下是完整代码（不作为代码段）：

<!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>

Answer 1

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

您可以尝试切换到边距而不是填充，以便元素之间存在边距而不是子元素的填充。

您还可以尝试查看event.currentTarget，看看您是否打算捕获它。

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

有用的图表可以是用于理解元素周围区域的框模型：

Answer 2

因为有一个隐藏的滚动条，它属于父元素。

为什么单击元素子元素的填充使元素成为event.target？

2 个答案: