Polymer 跨浏览器事件答案

【问题标题】：Polymer cross browser eventsPolymer 跨浏览器事件
【发布时间】：2016-11-02 20:03:04
【问题描述】：

我读对了吗？如果 Shady DOM 没有事件重定向，这是否意味着如果您需要重定向，并且您支持任何没有 ShadowDOM 的浏览器（又名 iPhone），那么您总是必须手动进行？ https://www.polymer-project.org/1.0/docs/devguide/events#retargeting

我要解决的问题是 Polymer 客户元素之间的事件通信。我希望一些元素成为事件的消费者，而另一些元素成为生产者。但是，Safari 等浏览器在我们的支持列表中，我相信这意味着它们将使用 shady DOM。

所以一个代码示例，应该是这样的：

<wut-action async remote="false" file="/actions/saveInventory.js">
  <wut-button class="saveInventory">
  </wut-button>
</wut-action>

我想创建一个<wut-button> 自定义元素，该元素会在点击时产生doAction 事件。我希望<wut-action> 使用doAction 事件（监听器）。我假设由于冒泡，我需要按照上面的方式进行合成。

我在阅读文档后担心这种设计不起作用。想法？

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

在我的测试中，Shady 和 Shadow DOM 都支持监听来自分布式子级的事件。你的设计可以跨浏览器工作。我在 Chrome 54、Firefox 49 和 Safari 10 上验证了这一点。

假设wut-button 触发一个名为“x-event”的事件，wut-action 可以像这样将listen 发送到该事件：

Polymer({
  is: 'wut-action',
  listeners: {
    'x-event': '_onEvent'
  },
  _onEvent: function(e) {
    console.log('event', e.detail);
  }
});

codepen

【讨论】：