嵌套的 Web 组件和事件传播
Nested web components and event propagation
我有两个网络组件。首先是一个输入字段。第二个是带有按钮的表单。我的页面只是简单的把input web component放到form web component中。
输入网络组件管理模糊事件以进行一些验证。此验证，如果出错，将一些元素添加到 DOM 中。
表单 Web 组件管理按钮上的单击事件以执行某些操作。
如果焦点在输入中并且我单击了按钮，则会触发模糊事件，但不会触发点击事件。
如果我删除将一些元素添加到 DOM 中的代码（在 blur 事件中），则会触发这两个事件！
这里有一个fiddle来证明：https://jsfiddle.net/2guc1rkj/
- 打开控制台
- 将焦点放在输入上并单击按钮 -> 控制台显示 'Blur'
- 注释行32(parent.appendChild(content);),运行Fiddle,把焦点放在输入上点击按钮->控制台显示'Blur' 和 'Click' !
要评论的行：
parent.appendChild(content);
为什么我的模糊事件对 DOM 进行了一些修改后我的点击事件不起作用？
当您有附加内容的代码时，点击事件没有触发的原因是因为附加内容会移动按钮。事件是按顺序触发的，所以它首先触发模糊，然后添加内容，向下移动按钮，然后点击不会发生在按钮上，因为按钮不再在那里接收点击。
当您评论 parent.appendChild 时，按钮没有移动，因此它保持原位。
您可以通过简单地将按钮移动到它不会四处移动并且不会被您追加的元素移动的位置来确认这一点。
我有两个网络组件。首先是一个输入字段。第二个是带有按钮的表单。我的页面只是简单的把input web component放到form web component中。
输入网络组件管理模糊事件以进行一些验证。此验证，如果出错，将一些元素添加到 DOM 中。 表单 Web 组件管理按钮上的单击事件以执行某些操作。
如果焦点在输入中并且我单击了按钮，则会触发模糊事件，但不会触发点击事件。 如果我删除将一些元素添加到 DOM 中的代码（在 blur 事件中），则会触发这两个事件！
这里有一个fiddle来证明：https://jsfiddle.net/2guc1rkj/
- 打开控制台
- 将焦点放在输入上并单击按钮 -> 控制台显示 'Blur'
- 注释行32(parent.appendChild(content);),运行Fiddle,把焦点放在输入上点击按钮->控制台显示'Blur' 和 'Click' !
要评论的行：
parent.appendChild(content);
为什么我的模糊事件对 DOM 进行了一些修改后我的点击事件不起作用？
当您有附加内容的代码时，点击事件没有触发的原因是因为附加内容会移动按钮。事件是按顺序触发的，所以它首先触发模糊，然后添加内容，向下移动按钮，然后点击不会发生在按钮上，因为按钮不再在那里接收点击。
当您评论 parent.appendChild 时，按钮没有移动，因此它保持原位。
您可以通过简单地将按钮移动到它不会四处移动并且不会被您追加的元素移动的位置来确认这一点。