首页 文章

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

提问于
浏览 次
2

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

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

然而，最近我开始使用Custom Elements和Shadow DOM . 上面的代码不适用于影子树中的 a 标记，因为click事件会重定向到影子主机 .

Is it possible to make the above code to work in order to intercept click events that occur in a shadow tree? If not, what is a best practice to continue to achieve this functionality?

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

javascript single-page-application polymer shadow-dom

3 回答

  • 0

    在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> 标签 .

    回复于
  • 1

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

    回复于
  • 0

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

    回复于

相关问题