飞镖鼠标事件到元素 null答案

【问题标题】：dart MouseEvent toElement null飞镖鼠标事件到元素 null
【发布时间】：2013-12-08 16:11:18
【问题描述】：

在我的程序中，我在 HTML 表中生成按钮，每个按钮都定义了相同的 onClick.listen 侦听器。

在监听器中，MouseEvent event.toElement 为 null。

表格是在HTML中预先创建的，但是表格行、行单元格和单元格中的按钮都是在dart中生成的。

event.toElement 怎么可以为空？

如果我尝试一个干净的示例应用程序（dart 编辑器中的新 Web 应用程序）并创建一个按钮，将其添加到 div，那么 event.toElement 不为空。

所以我有一个普遍的问题：当监听一个按钮的onClick事件，然后接收到MouseEvent，什么会导致MouseEvent的toElement属性为null？

编译成 JS 后，我在浏览器（chrome 和 firefox）中运行它。

编辑： 在 HTML 文件中，我直接链接了编译后的 JS 脚本。现在我更改为链接 dart 脚本和 pakcages/browser/dart.js（就像在同一个 dart 网络应用程序中一样）。进行此更改后，它在 chromium 和 chrome 中可以正常工作（event.toElement ！= null），但在 Firefox 中则不行。 Firefox 仍然有 event.toElement == null 怎么办？？

代码： HTML：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="sample_container_id">
      <p id="sample_text_id"></p>
    </div>
    <script type="application/dart" src="button_event.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

飞镖：

import 'dart:html';

void main() {

  ButtonElement b = new ButtonElement();
  b.text = 'Press Me';
  b.id = 'button_id';
  b.onClick.listen(onMarketButtonClick);
  querySelector('#sample_container_id').append(b);
}

void onMarketButtonClick(MouseEvent _event) {
 querySelector('#sample_text_id').text = _event.toElement.toString();
}

结果： 在 Chrome 中，单击按钮输出“按钮” 在 FireFox 中，点击按钮输出 'null'

用例： 在回调（onMarketButtonClick）中，我想检索被点击按钮的按钮id和自定义属性，这样我就可以识别点击了哪个按钮。想象一个计算器应用。不同数字的按钮具有不同的内部 html 和不同的自定义属性和/或 ID。但都具有相同的 onClick 侦听器。当监听器被调用时，我需要确定点击了哪个数字。所以我需要 访问 ButtonElement 及其自定义属性以及 id 和内部 html 等。（比计算器更复杂的用例的自定义属性）

非常感谢，伊姆兰

【问题讨论】：

Imran，查看实际代码时更容易找出问题所在。可以发一些吗？
@ShailenTuli ：你是对的......在问题中添加了代码:)
你想用onMarketButtonClick做什么？
请看问题，我添加了一个用例，很抱歉从一开始就没有说清楚

标签： button null mouseevent dart

【解决方案1】：

Firefox 属性称为relatedEvent。使用它，你不会得到null。

我仍然不确定用例，但根据您想要的信息，您可能只使用currentTarget 或target：

querySelector('#sample_text_id').text = _event.currentTarget.toString();
querySelector('#sample_text_id').text = _event.target.toString();

【讨论】：

你是对的，目标输出'按钮'。但这并不能解决我的问题，应该让我的用例清楚。请看上面的问题，我已经添加了用例（简而言之，我想检索被点击按钮的自定义属性：以识别点击了哪个按钮）
带有自定义属性，我的意思是 ButtonElement 的数据集映射...如何在 onClick 侦听器中检索它？
现在我可以使用它了....与目标...我将目标转换为 ButtonElement 并立即访问数据集、id、一切..非常感谢 Shailen！ (ButtonElement b = _event.target)

【解决方案2】：

您基本上可以使用MouseEvent (link) 的EventTarget target 属性。这是一个基本示例：

import "dart:html";

void main() {
  document.body.append(new ButtonElement()..text="btn1"..id="btn1");
  document.body.append(new ButtonElement()..text="btn2"..id="btn2");
  document.onClick.listen((MouseEvent e) => (print(e.target.id)));
}

只要单击鼠标，您就可以检查目标的类型，即button 适合您的情况。然后，你可以用它做任何你想做的事情。

【讨论】：

是的，你是对的。我没有意识到 EventTarget 可以“投射”到 ButtonElement 中。 EventTarget 例如没有“dataset”属性，甚至使用“target.id”也会在 dart 编辑器中发出警告。做 'ButtonElement b=e.target;print(b.dataset);'作品