飞镖中冒泡的事件答案

【问题标题】：Events bubbling in dart飞镖中冒泡的事件
【发布时间】：2026-01-14 07:30:02
【问题描述】：

我有一个充满图片（儿童）的图层，当鼠标在图层上时，我想知道鼠标相对于父图层和其中一张图片的坐标。我没有这样做。为了演示这个问题，我想出了一个简单的例子： 1 层，带有一张子图片并触发鼠标悬停事件。

考虑以下几点：

<!DOCTYPE html>
<html>
<head>   
  <title>bubbles</title>   
</head>
<body>
<div id="layer" style="width:1000px; height: 500px; border: 2px solid #8AC007;">
  <img id="image" src="https://www.dartlang.org/logos/dart-logo.png" style="position:absolute; left: 100px; top:100px; width:100px; height:100px; border: 2px solid #8AC007;">   
</div>

<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
</body>
</html>

和飞镖脚本：

import 'dart:html';

void main() {
  querySelector("#layer").onMouseMove.listen((e)=>print("${e.target}: ${e.offset}"));
}

当我将鼠标移到图层（不是图像！）上时，我收到消息：div: Point(x,y)，其中点 (e.offset) 在图层坐标中给出；当我将鼠标移到图像上时，我收到消息：img: Point(x, y) 和图像坐标中的e.offset。为 image.onMouseMove 设置了 Bou NO 侦听器。

因此问题：

发生了什么？为什么会触发 image.onMouseOver 事件？
让我们假设上一个问题的答案是因为图像是图层的后代。但是随着事件冒泡会发生什么？为什么 DOM 中的 image.onMouseOver 事件没有冒泡到层并触发 layer.onMouseOver 事件？

【问题讨论】：

标签： dart event-bubbling dart-html

【解决方案1】：

悬停<img> 时触发事件是因为<img> 是<div id="layer" 的一部分，<img> 显示在<div id="layer" 中。这与事件冒泡无关。当您移出<div id="layer" 时没有事件，因为没有为<body> 注册事件侦听器。如果你为 body 注册一个事件监听器，你会得到 <body> <div id="layer" 和 <img> 的事件。也许mouseenter 和mouseleave 更适合您的用例。

【讨论】：

好的。这回答了我的第一个问题。你是对的，这不是事件冒泡，因为虽然我有两个嵌套元素，但其中只有一个（div）注册了事件处理程序。为了测试，我添加了以下行 querySelector("#image").onMouseMove.listen((e)=>print("${e.target}: ${e.offset}")); 现在我希望当我悬停图像时，我应该从图像和图层事件处理程序中获取消息，但输出与我上面描述的完全相同。