首页 文章

事件重新定位焦点和模糊事件

提问于
浏览 次
3

我有一个自定义的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 回答

  • 3

    结果我在我的 polymer-element 标签上需要 tabindex ：

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

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

    回复于

相关问题