我有两个网络组件。首先是输入字段。第二个是带按钮的表格。我的页面只是将输入Web组件放入表单Web组件中。
输入Web组件管理模糊事件以进行一些验证。如果出现错误，此验证会将一些元素添加到DOM中。 表单Web组件管理按钮上的单击事件以执行某些操作。
如果焦点在输入中并且我单击按钮，则会触发blur事件，但不会触发click事件。 如果我删除了将一些元素添加到DOM中的代码（在blur事件中），则会触发这两个事件！
这是一个小提琴来证明：https://jsfiddle.net/2guc1rkj/
评论专栏：
parent.appendChild(content);
当我的模糊事件对DOM进行一些修改时，为什么我的点击事件无效？
答案 0 :(得分：2)
当您拥有附加内容的代码时，点击事件不会触发的原因是因为附加内容会移动按钮。事件按顺序触发，因此它首先触发模糊，然后添加内容，向下移动按钮，然后单击按钮不会发生，因为按钮不再接收点击。
当您对parent.appendChild发表评论时，该按钮不会移动，因此它会保留在原位。
您可以通过简单地移动上方没有移动的按钮来确认这一点，并且不会被您要追加的元素移动。