我有两个网络组件。首先是一个输入字段。第二个是带有按钮的表单。我的页面只是将输入 Web 组件放入表单 Web 组件中。
输入 Web 组件管理模糊事件以进行一些验证。此验证如果出现错误，则会将一些元素添加到 DOM 中。 表单 Web 组件管理按钮上的单击事件以执行一些操作。
如果焦点位于输入中并且我单击按钮，则会触发模糊事件，但不会触发单击事件。 如果我删除向 DOM 添加一些元素的代码(在模糊事件中)，则会触发这两个事件!
这是一个 fiddle 来证明:https://jsfiddle.net/2guc1rkj/
- 打开控制台
- 将焦点放在输入上并单击按钮 -> 控制台显示“模糊”
- 注释第32行(parent.appendChild(content);)，运行Fiddle，将焦点放在输入上并单击按钮 -> 控制台显示“模糊”和“单击”!
评论行:
parent.appendChild(content);
当我的模糊事件对 DOM 进行一些修改时，为什么我的点击事件不起作用？
最佳答案
当您有附加内容的代码时，单击事件不会触发的原因是附加内容会移动按钮。事件是按顺序触发的，因此它首先触发模糊，然后添加内容，将按钮向下移动，然后按钮上不会发生单击，因为按钮不再接收单击。
当您注释 parent.appendChild 时，按钮不会移动，因此它保持在原位。
您可以通过简单地移动上方的按钮来确认这一点，该按钮不会四处移动，也不会被您要附加的元素移动。
关于javascript - 嵌套 Web 组件和事件传播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46103873/