截取Shadow DOM屏障中的点击事件

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标记，因为click事件会重定向到影子主机。

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

注意：我使用Polymer Platform来填充Web组件（虽然不是完整的聚合物）。

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 */
});

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

Answer 2

您可能希望从头开始设计它，而不是乱砍现有结构以使其像单页应用程序一样。这将为您提供Web组件的绝佳功能。这是使用Polymer的单页应用的demo（和source）。即使您不想使用Polymer，也可以自己使用flatiron-director来完成同样的事情。

Answer 3

您可能希望使用core-ajax来处理您的ajax调用以及某种形式的inter-components communication来更新您的自定义元素。