Question

我只是在学习，所以代码可能不是最好的。我在其他答案中尝试了几个例子，但我被困在这里。

Function invisibleDiv(){  
  var invDiv = document.createElement('div');  
  var secondDiv = document.createElement('div');  
  secondDiv.setAttribute('class', 'secondDiv');
  document.body.appendChild(invDiv);
  invDiv.appendChild(secondDiv);
};

我有这个jQuery代码：

$(document).on("click", ".secondDiv", function (e){
    e.stopPropagation();
});

一切正常但我试图用纯Javascript替换所有jQuery函数，所以我尝试了这个：

document.addEventListener("DOMContentLoaded", function(event) {
  var secondDiv = document.querySelector('.secondDiv').
  div.addEventListener('click', function(e) {
    e.stopPropagation; // Not working
    secondDiv.stopPropagation; // Not working
  }
});

我尝试将事件监听器添加到函数invisibleDiv中，我可以在DevTools中看到事件已附加，但是当单击secondDiv时仍会在invisibleDiv中触发事件。

我可以通过Display：none / block将两个div添加到html代码中，但是因为它在动态添加时与jQuery一起工作，我想知道我做错了什么。

Answer 1

<强>更新

根据您的上述评论，在我看来，您正在寻找类似的内容：

  var outer = document.querySelector('.outer');
  var inner = document.querySelector('.inner');

  outer.addEventListener('click', function(e) {
      console.log("Outer clicked");
  });

 inner.addEventListener('click', function(e) {
     e.stopPropagation();
 });

http://jsfiddle.net/j9a0nsto/

看起来你没有调用这个函数。

JavaScript中的函数使用()括号执行，因此代码变为：

e.stopPropagation();和secondDiv.stopPropagation();

对secondDiv.stopPropagation()的调用是多余的，因为element对象没有该功能，需要删除。

Javascript stopPropagation

1 个答案: