Dart如何确定点击事件的来源答案

【问题标题】：Dart how to determine the source of an on click eventDart如何确定点击事件的来源
【发布时间】：2014-06-28 22:30:33
【问题描述】：

我有一些单选按钮；单击按钮时会发生一些动作。如何实现模拟点击事件的代码并检测“点击”是由模拟还是用户引起的？

chkBxB12 = querySelector('#B12');
chkBxB12.onClick.listen(chkBxB12Clicked);

void chkBxB12Clicked(Event e) {
  // do something
  // if mouse click or tap then
  //   do some-additional-thing 
}

foo() {
    chkBxB12.click()
{

[编辑]

我修改了 JAre 的示例以更好地满足我的需要（并将处理我的四个单选按钮的 8 种方法减少到两个 - Robert 的示例让我想起了这种需要）。这是修改后的代码，可以确定目标按钮是否被软件硬件点击（或轻敲）以及按钮的标识。

import 'dart:html';

void main() {
  querySelectorAll('input[type="radio"]').onClick.listen(foo);
  foo(new MouseEvent("synthetic")); // parameter is
}



void foo(MouseEvent event) {
  if (event.target is Element){
    Element target = event.target;
    if(target.id == 'radio1')
      print('${event.type} target ${target.id}');
    else if(target.id == 'radio2')
      print('${event.type} target ${target.id}');
  }
  else {
    if(event.type == "synthetic") print(event.type);
    else print("It didn't work!");
  }
}

输出如预期：

synthetic
click target radio1
click target radio2

【问题讨论】：

标签： event-handling dart

【解决方案1】：

你可以得到EventTarget 和e.target (link) 并检查它的类型

import 'dart:html';

void main() {
  querySelector("#sample_text_id")
      ..text = "Click me!"
      ..onClick.listen(foo);
  foo(new MouseEvent("synthetic"));
}

void foo(MouseEvent event) {
  if (event.target is Element){
    Element target = event.target;
    target.text = "Hello dart";
  }
  else print(event.type);
}

【讨论】：

【解决方案2】：

这是我的小例子：

.dart

import 'dart:html';

void main() {
  querySelectorAll('input[type="radio"]').onClick.listen((MouseEvent e) {
    print('detail=${e.detail}');
    print('offset=${e.offset}');
    print('client=${e.client}');
    print('layer=${e.layer}');
    print('screen=${e.screen}');
  });

  RadioButtonInputElement radio1 = querySelector('#radio1');
  radio1.click();
}

.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test click</title>
    <script async type="application/dart" src="test_click.dart"></script>
    <script async src="packages/browser/dart.js"></script>
  </head>
  <body>
    <input type="radio" name="radio" id="radio1">
    <input type="radio" name="radio" id="radio2">
  </body>
</html>

您询问如何检测用户是否点击或“模拟”：

这个测试的输出是：

detail=0
offset=Point(-13, -11)
client=Point(0, 0)
layer=Point(0, 0)
screen=Point(0, 0)

detail=1
offset=Point(3, 1)
client=Point(16, 12)
layer=Point(16, 12)
screen=Point(1936, 73)

第一个输出来自“模拟”点击。第二个来自真正的点击。我会检查事件的细节（我无法说出这个值的含义）或偏移属性。

这应该可以回答您的问题。

编辑

做一些研究后，你应该使用 detail 属性：

https://developer.mozilla.org/en-US/docs/Web/API/event.detail#Notes

对于鼠标事件 [...]，detail 属性表示鼠标被点击了多少次 [...]

所以这应该是最好的解决方案。

问候罗伯特

【讨论】：

在即 detail=0 但偏移量、客户端和层均小于 0。因此您可以回退到这些点。
我认为创建自己的事件对象而不是使用.click() 将是更简洁的解决方案。通常无论如何，您都需要在 UI 事件上增加额外的抽象层，特别是如果您想支持触摸 - 因为它高度浏览器和平台之间不一致。