阻止Javascript事件影响子元素

Question

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

使用event.stopPropagation（）。这将停止Javascript事件的冒泡，并且只允许应用于目标元素的事件执行；

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

    // event here

    event.stopPropagation();
}, false);