js怎么通过阻止父元素事件和所有子元素事件

Posted 2023-04-26

参考技术A

你说的这个应该是对于注册了同样的某个事件的父元素和子元素的操作吧：

① 阻止父元素事件，就是阻止事件冒泡，子元素的事件触发不要带动父元素的同一个事件：

② 阻止子元素事件，就是阻止事件捕获，一般不必这样做；

③ 当然，若想要注册的事件都失效，可以设置事件为null：

document.body.onclick = null;

阻止 Javascript 事件影响子元素

【中文标题】阻止 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 ！

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

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