Question

我有一些单选按钮;单击按钮时会执行某些操作。如何实现模拟点击事件的代码，并检测是否点击了＆＃39;是由模拟还是用户造成的？

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()
{

[edit]

我修改了JAre的例子以更好地满足我的需求（并减少了8种方法来处理我的四个单选按钮到两个 - 罗伯特的例子让我想起了这个需要）。这是修改后的代码，允许确定软件硬件和按钮的标识是否点击（或点击）目标按钮。

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

Answer 1

您可以使用EventTarget (link)获取e.target并检查其类型

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);
}

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

您询问了如何检测用户是否已点击或已模拟＆＃34;：

此测试的输出是：

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)

第一个输出来自＆＃34;模拟＆＃34;单击。真正点击的第二个。我要查看详细信息（我无法分辨这个值的含义）或事件的偏移属性。

这应该回答你的问题。

修改

进行一些研究后，您应该使用detail属性：

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

对于鼠标事件[...]，detail属性指示单击鼠标的次数[...]

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

此致罗伯特

Dart如何确定on click事件的来源

2 个答案: