点击事件没有传播

Question

我已将div事件添加到div中

div.addEventListener('click', function(event) { ... });

稍后，我使用innerHTML动态添加一个范围。

div.innerHTML = "<span>some text</span>"

现在，文本不可单击，这使我感到惊讶，因为我认为click事件将传播并触发父div上的click处理程序。到底是怎么回事？

我已经用jsfiddle重新创建了问题。我不明白发生了什么。

Answer 1

没有什么神奇的事情发生，您不会看到点击事件发生，因为从未触发点击事件。原因是由于浏览器生成事件的行为。我参考这个FIDDLE来解释会发生什么。

一个click-event被触发的元素之后元素已先有一个mousedown，然后mouseup。如果其中之一丢失，则不会执行单击。
在以下mouseover情况下触发A ：1）指针进入元素； 2）指针在元素上移动； 3）每次将鼠标移到元素上之后； 4）每次将鼠标移到元素上之后。（只要指针位于元素上，Firefox还会连续触发它，但这并不重要）。
每次执行innerHTML =此操作时，都会删除现有的HTML，并创建一个新的跨度。在小提琴中，我在跨度文本中添加了一个数字，每次发生时都会增加。

让我们评估一下当您输入div并逐步单击跨度时会发生什么：

输入div：将 mouseover被触发，并通过创建跨度innerHTML。该范围是数字0。
在div上移动，直到达到span： mouseover被触发多次，并且每次创建新的span。可以说我们以span20结尾。
单击范围：首先mousedown在现有范围20上触发a。之后立即mouseover触发a，删除span20并创建span21。释放鼠标按钮时，将在span21上mouseup触发a。由于未执行点击事件mousedown之前该跨度尚未收到。再次触发mouseup之后，删除span21并创建span22。mouseover

如果您缓慢执行操作并观察控制台，则可以轻松跟踪这些步骤。小提琴中的第二个div不是mouseup单击- 而是- 句柄，并且您发现每次释放按钮时都会触发该事件。