Перенацеливание событий Focus и Blur

У меня есть пользовательский элемент Polymer, который предназначен для представления сложного типа ввода. Он содержит фактический тег input внутри своего Shadow DOM, например:

<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 передаются внешним слушателям, когда пользователь щелкает между внутренним вводом и другими областями в пользовательском элементе. Если вы откроете консоль Dev Tools в этом CodePen, вы увидите внутренние и события внешнего фокуса и размытия происходят даже при щелчке между вводом и окружающей зеленой областью (которая находится внутри пользовательского элемента).

Нет ли способа зафиксировать события focus и blur внутри моего пользовательского элемента, чтобы я мог запускать их только при фактической фокусировке и размытии всего пользовательского элемента?


web-component polymer shadow-dom
person CletusW    schedule 25.05.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Оказывается, мне нужно было tabindex в моем теге polymer-element:

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

Вот рабочий CodePen, где внешние события focus и blur регистрируются только тогда, когда весь элемент сфокусировано и размыто.

person CletusW    schedule 25.05.2014