link in paper-item: 避免捕获点击

Question

我使用 app-location 显示基于 url 的一组页面中的一个，我还有一个包含 paper-item 列表的 paper-listbox，显示可用页面的列表。每个 paper-item 里面都有一个 link 可以转到那个页面。如果正常点击link，则请求被app-location拦截，页面直接显示，无需重新加载。如果 link 是 Ctrl+clicked 或 middle clicked 或其他什么，它会在新选项卡中打开页面，就像正常的 links 一样。

我的问题 - 如何使列表框中的选择与显示的页面保持同步？我已经尝试了所有我能想到的方法，但没有任何效果。

没有任何额外的逻辑，link 可以工作，但是单击 paper-item 会选中它，即使显示的页面没有改变。我尝试在列表框的 selected 属性上添加一个观察者，并根据需要更新 url 。这主要适用于一个例外 - Ctrl + 单击 link 在新选项卡中打开仍然会导致 paper-item 被选中，因此现有选项卡也会发生变化。

我还尝试将整个 paper-item 包裹在 link 中，但这根本没有帮助。

有什么办法可以解决吗？似乎唯一的解决方案是找到一种方法来阻止 paper-item 在 child link 上捕获点击事件。但是如果不修改 Polymer 源代码本身，我找不到任何方法来做到这一点，这是不可能的。

Answer 1

我想出了一个例子，它使用 iron-selector 和一些 css 来展示如何做到这一点。然后神奇的是在你的锚元素上有一个事件，它检查是否按下了 ctrl，如果是，它会阻止事件向下传播，这会阻止关注项目。

_onClick: function(e) {
    if (e.ctrlKey) {
      console.log('stop propagation');
      e.stopPropagation();
    }
}

plunkr

请注意，当 right-clicking 并选择从 link 打开一个新标签时，这也适用，因为焦点不会传递到项目。

此外，我知道这不使用 paper-item 组件。我试过同样的方法，但没有用，它似乎总是能抓住焦点。

link in paper-item: 避免捕获点击

link in paper-item: avoid capturing tap

javascript

event-bubbling

dom-events

polymer