PolymerElement - 捕获 onClick 事件以传递给 CustomEvent答案

【问题标题】：PolymerElement - capture onClick events to pass to CustomEventPolymerElement - 捕获 onClick 事件以传递给 CustomEvent
【发布时间】：2013-10-31 09:10:27
【问题描述】：

使用 Polymer.Dart 构建单页应用程序，我在想实现双向 EventBus 的最佳方式

从孩子<polymer-element> 我将使用fire 和asyncFire。从父 <polymer-element> 我将使用 window.on['*'].listen 捕获所有事件。

由于 <polymer-element> 被封装，因此不会在元素本身之外冒出任何事件。

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published int count = 0;

  ClickCounter.created() : super.created() {
    this.shadowRoot.addEventListener('click', (e) {
      if(e.target is AnchorElement) {
        AnchorElement anchor = e.target;
        this.asyncFire('ce', detail: "Anchor ${anchor.pathname}", canBubble: true);
        e.preventDefault();
      }
    }, true);
  }

  void increment(Event event, var detail, Node target) {
    count++;
    this.asyncFire('ce', detail: "Click...$count..", canBubble: true);
  }
}

例如，为了捕获所有点击事件，并传递给fire 和asyncFire，是使用this.shadowRoot.addEventListener 捕获所有点击事件并传递给fire 或asyncFire，或者有更好、更有效的方法来收听<polymer-element> 本身。

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

我不确定这里的确切问题是什么，但您使用的技术很好，这就是我为解决事件重定向所做的工作。

为了澄清一些事情，事件确实会从阴影树中冒出，但是当它们越过阴影边界时，它们会重新定位到阴影宿主。点击事件的问题是目标属性不是事件的一部分，而是锚标记的一部分，所以当事件被重定向时，您将无法访问该属性。

另外，我认为on['*'] 不起作用。我没有看到任何关于它的文档，并且对它的一些测试不起作用。相反，简单地让一个元素包含任何节点可以监听任何事件类型的元素应该可以很好地作为广播器。如果您尝试将事件通过管道传输到另一个框架，我会配置事件总线以转发一组特定的事件类型。

【讨论】：