2

我core-list为每个项目都有一个自定义元素：

<core-list-dart data={{data}} on-core-activate={{onCoreActivate}}>
  <template>
    <person-item item={{model}}></person-item>
  </template>
</core-list-dart>

自定义元素 ( person-item) 有两个按钮：

<polymer-element name="person-item">
  <template>
    <paper-item>
      <div>Name: {{item.name}}</div>
      <button on-click={{onItemClick}}>Click me!</button>
      <paper-icon-button icon="menu" on-click={{onItemClick}}>Click me!</paper-icon-button>
    </paper-item>
  </template>
  <script type="application/dart" src="person_item.dart"></script>
</polymer-element>
  • 当我按预期单击该项目时，将onCoreActivate调用该方法。
  • 当我按button预期单击该项目时，将onItemClick调用该onCoreActivate方法并且不调用该方法。
  • 当我单击该项目时paper-icon-button，该onItemClick方法被调用，但该onCoreActivate方法也被调用。

core-activate在第三种情况下如何防止事件发生？

我试图阻止click事件从该onItemClick方法传播，但没有成功。

我也试图阻止tap事件传播但没有成功。

4

1 回答 1

0

我记得有一些丑陋的黑客行为，当用户按下列表项中的按钮时，我在给定的时间内保存了一个标志。但我上次检查（core_elements 0.4）时，处理单击列表本身（CoreList）正在工作（即不在项目上）。下面的伪代码检查了 id 按下的目标项目（在我的情况下，它是 PaperIconButton 但不相关）。当用户点击列表中的其他位置时，我得到 core-activate 事件，但当用户点击按钮时没有得到它。

CoreList list = $['list'];
list.onClick.listen((Event e) {
  var target = e.target;
  if (target is Element) {
    if (target.id == "play") {
      // prevent sending the core-activate event
      e.preventDefault();

      // ... do my stuff here
    }
  }
});

那么你可能想知道我们是如何知道按钮属于哪个项目的。有很多方法。我个人将其存储在从目标按钮祖先中找到的项目本身的 data-id 属性中。

于 2014-11-23T09:54:49.267 回答