如何獲得聚合物組分內元素的實際事件keydown目標？

防止backspace返回導航的代碼通常需要類似this approach這樣的窗口，其中窗口keydown事件對於退格被阻止，除了一小部分已知元素類型（如Input，TextArea等）。如何獲得聚合物組分內元素的實際事件keydown目標？

對於聚合物自定義元素中的元素，這不起作用，因爲keydown事件的目標類型是自定義元素的類型，而不是獲得keydown的實際元素。每個自定義元素的類型都不相同。這會阻止目標元素類型的退格空間不可用。

有沒有辦法知道聚合物元素內的實際元素的類型，得到了按鍵？還是有更好的方法呢？

來源

2014-09-13 Ed Evans

一種方法是深入到自定義元素的陰影（和它的陰影）中，以獲得真正的活動元素。像這樣工作在鉻36：

function getActiveElem(target) {  
    do { 
    if (target.shadowRoot != null) {  
     target = target.shadowRoot.activeElement; 
    } 
    } while(target.shadowRoot != null); 
    return target; 
} 

window.addEventListener("keydown", function(e) { 
    if (e.keyCode == 8) {  
    var preventKeyDown; 

    var d = getActiveElem(e.target); // Get the real active element 

    switch (d.tagName.toUpperCase()) { 
     case 'INPUT': 
     // more smarts here 
     preventKeyDown = false; 
     break;   
     // case TEXTAREA, et al. 
    } 
    // e.preventDefault() if preventKeyDown   
    } 
}

來源

2014-09-13 20:00:57

這會失敗的幾個紙元素有多個shadowRoot但不會太難支持，但Scotts解決方案無論如何都比較簡單。 – 2014-09-15 06:42:47

只要有可能，這是很好的嘗試，以工程項目，以避免破壞封裝。這就是當你跨越陰影邊界時調整event.target的原因。

但是，event.path屬性是一個轉義影線，其中包含已經看到該事件的所有元素的數組，並且應該允許您解決此問題。

來源

2014-09-13 20:44:07

[事件路徑]（http://www.w3.org/TR/shadow-dom/#event-paths）是解決這個問題的最好方法，我們希望在頂層編寫一個通用行爲。但是，至少在Chromium 36.0.1985.97（280598）上，event.path始終爲零。 – 2014-09-15 13:16:39

不要讓DevTools欺騙你。 event.path長度爲零是一個最近修復的錯誤：http://crbug.com/402749。 – ebidel 2014-09-15 16:21:20

如何獲得聚合物組分內元素的實際事件keydown目標？

回答

相關問題