指针事件目标始终是最外层的 Polymer 元素答案

【问题标题】：Pointer events target is always the outer-most Polymer element指针事件目标始终是最外层的 Polymer 元素
【发布时间】：2014-03-19 12:42:58
【问题描述】：

我正在移植 polymer-ui-card 从 JS 到 Dart。

不同之处在于，在我们的项目中（按照惯例），我们有一个包含整个应用程序的附加聚合物元素（app-element）。

在 JavaScript 中看起来像

<body unresolved>
  <div id="cards">
    <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
    <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
    <polymer-ui-card></polymer-ui-card>
    <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
    <polymer-ui-card></polymer-ui-card>
  </div>
  ..
</body>

我们的 Dart 端口看起来像

<body unresolved>
  <app-element></app-element>
</body>

app-element有body标签在JS中的内容

<polymer-element name='app-element'>
  <template>
    <div id="cards">
      <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
      <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
      <polymer-ui-card></polymer-ui-card>
      <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
      <polymer-ui-card></polymer-ui-card>
    </div>
  </template>
  ..
<polymer-element>

polymer-ui-card（在 JS 和 Dart 中相同）

<polymer-element name="polymer-ui-card" attributes="swipeable noCurve"
on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}" on-flick="{{flick}}">

这里的问题是所有指针事件的目标是<app-element>而不是<polymer-ui-card>元素。

这是设计使然，还是可能只是 Dart 的问题，还是我做错了什么？

【问题讨论】：

标签： dart dart-polymer polymer shadow-dom pointer-events

【解决方案1】：

由于event retargeting，不再可能在没有上下文的情况下谈论事件的target。

事件侦听器的注册位置决定了事件对象上标识的 DOM 节点的范围。

如果您将事件侦听器放在<app-element> 上，它将始终是目标，因为它在文档范围内没有子级。

【讨论】：

如我的代码所示，事件侦听器位于polymer-ui-card，但polymer-ui-card 没有收到任何这些事件（未调用事件处理程序）。当我将on-xxx 事件标记放在app-element 上时，会调用app-element 事件处理程序。单击工作正常，这似乎只是指针事件的问题。也许这只是 Polymer.dart 的一个问题，但在提交错误之前，我想知道这是否是设计使然，或者这是否应该有效。
我对聚合物用户界面切换按钮有同样的问题。 on-click 适用于任何地方，但 on-tap 仅在 polymer-ui-toggle-button 不在另一个聚合物元素内时才有效。
听起来像是 Polymer.dart 的问题。在其他元素/shadow-dom 中组合元素不应影响事件定位。