點擊事件沒有傳播

Question

我已將div事件添加到div中

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

稍后，我使用innerHTML動態添加一個范圍。

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

現在，文本不可單擊，這使我感到驚訝，因為我認為click事件將傳播並觸發父div上的click處理程序。 到底是怎么回事？

我已經用jsfiddle重新創建了問題。 我不明白發生了什么。

http://jsfiddle.net/3n5s3ez9/

Answer 1

沒有什么神奇的事情發生，您不會看到點擊事件發生， 因為從未觸發點擊事件 。 原因是由於瀏覽器生成事件的行為。 我參考這個FIDDLE來解釋會發生什么。

• 在該元素上先click-event mousedown然后在mouseup上觸發click-event 。 如果其中之一丟失，則不會執行單擊。
• 當1）指針進入元素時； 2）指針在元素上移動時； 3）每次將鼠標移到元素上之后； 4）每次將鼠標移到元素上之后，就會觸發mouseover 。 （只要指針位於元素上，Firefox還會連續觸發它，但這並不重要）。
• 每次我們執行innerHTML =刪除現有HTML並創建新的跨度。 在小提琴中，我在跨度文本中添加了一個數字，每次發生時都會增加。

讓我們評估一下當您輸入div並逐步單擊跨度時會發生什么：

• 輸入div：觸發mouseover ，並且span由innerHTML創建。 該范圍是數字0 。
• 在div上移動直到到達跨度：多次觸發mouseover ，並且每次創建新的跨度。 可以說我們以span20結尾 。
• 單擊范圍：首先，在現有范圍20上觸發mousedown 。 之后立即觸發mouseover ，從而刪除span20並創建span21 。 當mousebutton被釋放的mouseup扳機span21。 因為在未執行click-event之前，該跨度尚未收到mousedown 。 mouseup mouseover再次觸發后，刪除span21並創建span22。

如果您緩慢執行操作並觀察控制台，則可以輕松跟蹤這些步驟。 小提琴中的第二個div不是click-，而是mouseup -handler，您會發現每次釋放按鈕時都會觸發該事件。

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

您的問題是“ mouseover”偵聽器會不斷在您的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;
    }
});

看起來像一個邪惡的循環。