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

Question

我有一个自定义的聚合物元素，用于表示复杂的输入类型。它在其影子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事件，这样我就只能在实际聚焦和模糊整个自定义元素时触发它们？

Answer 1

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

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

仅当整个元素被聚焦和模糊时才注册外部focus和blur事件的Here's a working CodePen。