javascript - 跨 Shadow DOM barrier 拦截点击事件

Question

在我的应用程序中，我拦截了对链接的点击并将它们转换为 AJAX 调用以实现单页应用程序。在 jQuery 中，这看起来像这样:

$('#main').on('click', 'a[href]', function(e) {
  if (e.which == 2 || e.metaKey) return; // don't capture new tab clicks
  /* stuff */
});

不过，最近我开始使用自定义元素和 Shadow DOM。上面的代码不适用于影子树中的 a 标签，因为点击事件被重定向到影子主机。

是否可以使上述代码工作以拦截影子树中发生的点击事件？如果不是，继续实现此功能的最佳做法是什么？

注意:我正在使用 Polymer Platform 来填充 Web 组件(尽管不是完整的 Polymer)。

Answer 1

在 Polymer ≥0.4.0 中你可以使用 /deep/组合器:

$('#main').on('click', '* /deep/ a[href]', function() {
  if (e.which == 2 || e.metaKey) return; // don't capture new tab clicks
  /* stuff */
});

注意:应谨慎使用此技术，因为它可能会影响所有组件的实现，包括 Web 平台的某些部分，如 <video>标签。