Question

我注意到core-selector core-select事件的触发方式有些奇怪。

假设我们有：

HTML：

<core-selector multi>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</core-selector>

JavaScript的：

document.querySelector('core-selector').addEventListener('core-select', function (event) {
  console.log(event.detail.item.textContent);
  console.log(event.detail.isSelected);
});

我发现当我选择item 1后跟item 2时，我发现在最后一次选择中，事件会被多次触发。它被解雇了3次：

取消选择第1项
第1项的选择
第2项的选择

这应该发生吗？

我希望每次选择/取消选择都会触发一次事件，event.detail.item是被点击的项目。

另外，有没有办法获得我可以在JSBin上使用的core-selector.html的远程版本来向你展示演示？

Answer 1

core和paper元素托管在//www.polymer-project.org/components/，因此您可以像这样制作JsBins：

http://jsbin.com/geseni/3/edit

您所看到的效果是由core-selector实现多选的方式引起的。我认为这是不合适的，我们错过了它，因为我们倾向于使用绑定事件。

我发布了一张发票：https://github.com/Polymer/core-selector/issues/6

Answer 2

似乎是一种已知行为：https://github.com/Polymer/paper-tabs/issues/26

“这是预期的。核心选择器的核心选择事件在被激活时被触发   项目的选择状态已更改。当这个事件被解雇时   选择或取消选择项目。这就是为什么你看到2个事件的原因   单击，一个用于选择，一个用于取消选择。

您可以使用event.detail中的isSelected来检查选择   “ - frankiefu于2014年9月23日发表评论

    var tabs = document.querySelector('#tabs');
tabs.addEventListener('core-select', function(e) {
  if (e.detail.isSelected) {
    console.log("Selected: " + tabs.selected);
  }
});

然而，聚合物团队的Rob Dodson还有其他事情需要补充：

如果可能的话，我想重新审视这个问题，因为我不断收到有关它的错误报告：Polymer / docs＃696


另外，从其中一个执行教程的DA：

事件的双重触发似乎非常奇怪 - 是的，有多个   核心选择器的选择（根据说明），但我   选择一个标签 - 这肯定感觉像一个错误，而不是理智。和   我个人同意，当我选择一个标签获得2时，感觉很奇怪   我必须挖掘的事件，以找出被点击的人。

所以谁知道

Answer 3

使用核心激活代替核心选择来处理单个选择事件。使用核心选择事件历史记录。

核心选择器的“核心选择”事件如何运作？

3 个答案: