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

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

原來我需要一個tabindex我polymer-element標籤：

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

Here's a working CodePen在當整個元素集中和模糊外部focus和blur事件只註冊。