嵌套的Web組件和事件傳播

Question

我有兩個Web組件。首先是輸入字段。其次是一個帶有按鈕的表單。我的頁面只需將輸入的Web組件放入表單Web組件中。

輸入Web組件管理模糊事件以進行一些驗證。此驗證在發生錯誤時將一些元素添加到DOM中。 表單Web組件管理按鈕上的點擊事件以執行一些操作。

如果焦點位於輸入中，並且我單擊該按鈕，則會觸發模糊事件，但不會觸發點擊事件。 如果我刪除了在DOM中添加一些元素的代碼（在blur事件中），這兩個事件被觸發！

下面是要證明一個小提琴：https://jsfiddle.net/2guc1rkj/

1. 打開控制檯
2. 把重點放在輸入，並單擊按鈕 - >控制檯顯示「模糊處理」
3. 註釋行32（ parent.appendChild（content）;），運行Fiddle，將焦點放在輸入上，然後單擊按鈕 - >控制檯顯示「模糊」和「單擊」！

行發表評論：

parent.appendChild(content); 

爲什麼當我模糊事件做出一些修改的DOM我的單擊事件不工作？

Answer 1

當您擁有追加內容的代碼時，點擊事件不會觸發的原因是因爲追加內容會移動按鈕。事件會按順序觸發，因此它首先觸發模糊，然後添加內容，向下移動按鈕，然後單擊不會在按鈕上發生，因爲該按鈕不再接收點擊。

當您評論parent.appendChild時，按鈕不會移動，因此它保持原位。

您可以通過簡單地移動上面的按鈕來確認此位置，該按鈕不會四處移動，也不會因您正在追加的元素而移位。

https://jsfiddle.net/augburto/2guc1rkj/1/