阻止 Javascript 事件影响子元素

Posted 2023-02-22

【中文标题】阻止 Javascript 事件影响子元素

【英文标题】：Stop Javascript event from affecting child elements

【发布时间】：2012-08-16 02:47:23

【问题描述】：

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

【参考方案1】：

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

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

    // event here

    event.stopPropagation();
, false);

【参考方案2】：

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

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

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

【参考方案3】：

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

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

【讨论】：

你为什么要这样做？有一个内置的功能可以为您完成。

@Nile 好点，但这已经解决了一个问题，我希望能按这个问题排序（真的是一个附带问题）

我不喜欢将处理程序附加到每个子元素！只需附加到父级并检查 id ！

什么意思？您仍在使用处理程序

是的，但只有父母而不是每个孩子的处理程序:)