如何在 Javascript 中停止传播

How to stopPropagation in Javascript

本文关键字：传播 Javascript      更新时间：2023-09-26

我看了一遍，不能完全明白我做错了什么。

我只希望父元素在单击子元素时不要触发（更改不透明度）。

简单的答案值得赞赏！

谢谢

HTML
<div id="not-clicker">
    <div id="clicker" onClick="clickBox();">
    </div>
</div>
JAVASCRIPT
function clickBox(event) {
    document.getElementById('clicker').style.backgroundColor = 'green';
    event.stopPropagation();
};

JSfiddle （无法正常工作）

这不会捕获事件。您将需要一个事件处理程序来执行此操作。因此，您需要重构以避免使用内联 JavaScript

网页更改

<div id="clicker"></div>

JS更改

document.getElementById('clicker').onclick = function(event){
 document.getElementById('clicker').style.backgroundColor = 'green';
 //this.style.backgroundColor = 'green';note you can also use this to reference the element now
 event.stopPropagation();
};

编辑

更多信息

请注意，由于这不再内联，因此脚本必须在元素位于 DOM 中之后运行。为此，您需要将脚本放在页面的较低位置，或等待窗口的加载事件触发。这是一个例子

window.onload = function(){//this callback executes when the window is fully loaded
 //now we can guarantee all DOM elements are present
 document.getElementById('clicker').onclick = function(event){
  this.style.backgroundColor = 'green';
  event.stopPropagation();
 };
};

在你的jsfiddle上，clickBox在onLoad中..使用左侧的"No Wrap in head"

你有getElementByTag！使用 getElementById .

相关文章：