Question

我已将点击事件添加到div

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

稍后我使用innerHTML动态添加span。

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

现在文本不可点击，这让我感到惊讶，因为我认为click事件会向上传播并触发父div上的click处理程序。发生了什么事？

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

http://jsfiddle.net/3n5s3ez9/

Answer 1

没有任何神奇的事情发生，你没有看到点击事件发生，因为点击事件永远不会被解雇。原因是浏览器生成事件的行为。我引用this FIDDLE来解释会发生什么。

在元素首次获得click-event然后是mousedown之后，会在元素上触发mouseup。如果其中一个丢失，则不会执行点击。
当1）指针进入元素时触发mouseover，2）当指针在元素上移动时，3）在元素上的每个mousedown之后，以及4）在元素上每次鼠标之后。（只要指针在元素上，Firefox另外会连续触发它，但这并不重要。）
每次我们innerHTML =删除现有的HTML并创建新的范围。在小提琴中，我在span-text中添加了一个数字，每次发生时都会增加。

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

输入div： mouseover已触发，范围由innerHTML创建。范围的数字为 0 。
移动div直到达到范围： mouseover多次触发，每次创建新范围。让我们说我们最终得到 span20 。
点击范围：首先在现有 span20 上触发mousedown。之后会立即触发mouseover，删除 span20 并创建 span21 。释放鼠标按钮后，会在 span21 上触发mouseup。因为在没有执行点击事件之前，该范围未收到mousedown。鼠标识别mouseover再次触发后，删除span21并创建span22。

如果您慢慢执行操作并观察控制台，则可以轻松跟踪这些步骤。小提琴中的第二个div没有点击 - 但是mouseup - 处理程序，并且每次释放按钮时都会发现该事件被触发。

Answer 2

尝试在div上设置背景颜色，这样您就可以看到自己是否真正点击了预期的内容。我发现div通常不是我期望的那样。

Answer 3

我认为你需要首先获得元素。

var div = document.getElementsByTagName("div");

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

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

Answer 4

您的代码非常接近我做了一些有效的调整

HTML：

Javascript：

  //get elementsByTagName
  //you have to add the [0] index in order for
  //to get the div from the collection of div elements stored
  //in the div variable
  var div = document.getElementsByTagName("div")[0];


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

    alert("it works");


   });



   div.innerHTML = "<span>Hello World</span>";

Answer 5

你的问题是“鼠标悬停＆＃39;监听器不断触发你的div，导致不断添加新的跨度，然后再次触发它，导致你对span元素的点击不会传播。

我创建了一个小提琴，其中只添加了一次：

http://jsfiddle.net/3n5s3ez9/59/

var d = document.getElementById("hello");
var missionAccomplished = false;
d.addEventListener("click", function(event) {
    alert(event);
});
d.addEventListener("mouseover", function (event) {
    console.log('triggered');
    if (!missionAccomplished) {
        d.innerHTML = "<span>Hello World</span>";
        missionAccomplished = true;
    }
});

看起来像一个邪恶的循环。

点击事件不会传播

5 个答案: