javascript - 阻止 Javascript 事件影响子元素

Question

我有一个创建元素的脚本，创建过程的一部分是添加一个onclick事件（使用addEventListener），但是当我点击一个子元素时，会触发父元素的onclick事件。当源是子元素时，如何防止检测到点击？

Answer 1

使用event.stopPropagation(). 这会阻止 Javascript 事件的冒泡，并且只允许应用到目标元素的事件执行；

window.addEventListener("click", function(event){

    // event here

    event.stopPropagation();
}, false);

Answer 2

问题是事件正在冒泡到父级。

在孩子的onclick事件中，告诉事件停止传播：

onclick = function (event) {
    // ...
    event.stopPropagation();
};

Answer 3

父点击处理程序：（检查被点击元素的 id）

function handler(e){
  if(e.target.id != "parentID") return;
  ....
}