焦点和模糊事件的事件重定向答案

【问题标题】：Event Retargetting of the Focus and Blur Events焦点和模糊事件的事件重定向
【发布时间】：2014-07-14 04:24:02
【问题描述】：

我有一个用于表示复杂输入类型的自定义 Polymer 元素。它在其 Shadow DOM 中包含一个实际的 input 标签，如下所示：

<polymer-element name="my-input">
  <template>
    <input type="text" on-blur="{{onBlur}}" on-focus="{{onFocus}}"/>
  </template>
  <script>
    Polymer('my-input', {
      onBlur: ...,
      onFocus: ...
    });
  </script>
</polymer-element>

目前，当用户在自定义元素的内部输入和其他区域之间单击时，focus 和 blur 事件会泄漏给外部侦听器。如果您在this CodePen 中打开开发工具控制台，您将看到内部和外部焦点和模糊事件发生，即使在输入和周围的绿色区域（都在自定义元素内）之间单击也是如此。

有没有办法在我的自定义元素中捕获focus 和blur 事件，所以我只能在实际聚焦和模糊整个自定义元素时触发它们？

【问题讨论】：

标签： polymer web-component shadow-dom

【解决方案1】：

原来我的polymer-element 标签上需要一个tabindex：

<polymer-element name="my-input" tabindex="0">

Here's a working CodePen，其中外部 focus 和 blur 事件仅在整个元素被聚焦和模糊时注册。

【讨论】：