event-bubbling 相关问题

这是我的 HTML 文件 document.querySelector('.a').onclick = ()=>{ 做...</desc> <question vote="1"> <p>这是我的 HTML 文件</p> <pre><code><div class="a"> <div class="b"> </div> </div> <script> document.querySelector('.a').onclick = ()=>{ document.querySelector('.a').style.backgroundColor ='black' } document.querySelector('.b').onclick = ()=>{ document.querySelector('.b').style.backgroundColor ='violet' } </script> </code></pre> <p>当我单击类为“b”的 div 时，类为“a”的 div 上的事件处理程序也会被调用。我只想调用带有“b”类事件处理程序的 div。有人可以帮忙吗？</p> </question> <answer tick="true" vote="3"> <p>这就是<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture" rel="nofollow noreferrer">事件冒泡</a>，这意味着每个事件不仅会在目标元素上触发，还会在其祖先元素上触发。</p> <p>要防止这种行为，您可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation" rel="nofollow noreferrer">Event.stopPropagation</a> 来阻止事件传播到目标元素的祖先元素。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.querySelector('.a').onclick = () => { document.querySelector('.a').style.backgroundColor = 'black' } document.querySelector('.b').onclick = (event) => { event.stopPropagation(); document.querySelector('.b').style.backgroundColor = 'violet' }</code></pre> <pre><code>div { width: 100px; height: 100px; } .a { padding: 40px; background: red; } .b { background: blue; }</code></pre> <pre><code><div class="a"> a <div class="b">b</div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>JS中有一个概念叫<a href="https://javascript.info/bubbling-and-capturing#bubbling" rel="nofollow noreferrer">事件冒泡</a>。默认情况下，特定元素上发生的任何事件都将传播到父级及其父级，依此类推，直到事件到达文档。</p> <p>为了阻止这种行为，<a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation" rel="nofollow noreferrer"><pre><code>Event.stopPropagation</code></pre></a>将前来救援并停止向家长传播该事件。</p> <p>因此，在这种情况下，在具有类 <pre><code>e.stopPropagation</code></pre> 的 div 的 <pre><code>onclick</code></pre> 处理程序中调用 <pre><code>b</code></pre>，即内部 div 将停止将事件传播到父 div。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.querySelector('.a').onclick = (e) => { document.querySelector('.a').style.backgroundColor = 'black' } document.querySelector('.b').onclick = (e) => { e.stopPropagation(); document.querySelector('.b').style.backgroundColor = 'violet' }</code></pre> <pre><code>.b { width: 50%; }</code></pre> <pre><code><div class="a"> <div class="b"> Dummy </div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>试试这个：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> document.querySelector('.a').onclick = ()=>{ document.querySelector('.a').style.backgroundColor ='black' } document.querySelector('.b').onclick = (e) => { e.stopImmediatePropagation(); document.querySelector('.b').style.backgroundColor ='violet' }</code></pre> <pre><code><div class="a">a <br/> <div class="b"> Click here! </div> </div></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript event-handling dom-events event-bubbling

回答 0 投票 0

点击打开按钮（事件侦听器）后，React 弹出框（模态）会自动关闭

目标：我想在 React 中实现一个弹出框（模态）。当用户单击按钮时，弹出窗口将打开。当用户在弹出窗口外部单击时关闭弹出窗口。逻辑：有条件地撕裂...

javascript reactjs event-listener event-bubbling react-modal

回答 1 投票 0

如何防止javascript中的事件冒泡

感谢您的阅读...我会立即进入这个问题。我有一个附加到图像的 onclick 函数。 JavaScript 函数：功能感谢您的阅读...我会直接讨论这个问题。我有一个附加到图像的 onclick 函数。 <div id="mercury" onclick="displayCreations()"> Javascript函数： function displayCreations(){ document.getElementById("projects").style.display = "block"; } 到达该页面后，我显示为块的 div 将设置为 none。此函数将显示设置为阻止，这有效。我在为 div 内的图像创建 onclick 函数时遇到问题，该函数将 display 值设置回 none。这似乎不适用于我当前的代码... HTML： <div id="mercury" onclick="displayCreations()"> <img id="exit" onclick="hideCreations()" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" /> <div id="projects"> <h3>No creator here, but it looks like you've found some his wonderous creations...</h3> <ol> <li>Project 1</li> <li>Project 2</li> <li>Project 3</li> </ol> </div> </div> Javascript： function displayCreations(){ document.getElementById("projects").style.display = "block"; } function hideCreations(){ document.getElementById("projects").style.display = "none"; } 当我在 google chrome 上运行此网站并单击“退出”按钮时，没有任何反应，错误消息中也没有显示任何内容。此链接会将您带到一个著名的网站 Gyazo，在那里您可以找到我所看到的 gif。链接：链接我更喜欢为我当前的代码使用 javascript 解决方案，也许你可以向我解释为什么会发生这种情况，这样我就不会再次陷入同样的情况。这是由于事件冒泡引起的。在子级上触发事件会向上传播到其父级。在您的情况下，图像上的单击事件也会触发父级div上的单击事件。使用event.stopPropagation()来防止这种情况发生。 HTML：将 event 作为参数传递给事件侦听器函数 <img id="exit" onclick="hideCreations(event)" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" /> JS：捕获事件并调用其 stopPropagation 方法 function hideCreations(event){ event.stopPropagation(); document.getElementById("projects").style.display = "none"; } AL-zami 的一个非常有用的解决方案。它在函数之外也很有用，例如onclick="event.stopPropagation();yourFunction(现有参数集)"。因此，您不需要更改 yourFunction 及其参数列表，也不需要更改代码中对它的其他调用。甚至可以围绕不同的事件创建一个额外的容器（例如 div）以防止冒泡。例如： <div id="picBigOLL" onclick="previousPict();"> <div id="picBigPlay" onclick="event.stopPropagation();"> <div id="playButsBox"> <div id="bPPlayL" onclick="diaPB(-1)"> ⯇ </div> <div id="bPPlayS" onclick="diaPB(0)"> || </div> <div id="bPPlayR" onclick="diaPB(1)"> ⯈ </div> </div> </div> 内联属性很脏。尝试这样的事情： //your function function hideCreations(){ document.getElementById("projects").style.display = "none"; } //initializing your website by assigning event-listeners to elements function init(){ //assign an listener to the click-event of your element document.getElementById("exit").addEventListener("click",function(event){ //stops all other listeners from firing event.stopImmediatePropagation(); //execute your function hideCreations(); } } //calls the init-function, once the document is ready document.onreadystatechange = init; 欲了解更多信息，请查看： https://blog.webdevsimplified.com/2022-01/event-listeners/

javascript html css event-bubbling stoppropagation

回答 3 投票 0

我需要在其他组件更改时更新 blazor 组件的状态

我有一个包含不同组件的 blazor 页面。组件结构如下：页组件1 组件11 组件2 当组件 11 上发生事件时，组件 2 应该更新...

.net-6.0 blazor-server-side event-bubbling blazor-component

回答 1 投票 0

带有 jQuery 的 Javascript：单击并双击相同的元素，不同的效果，一个禁用另一个

我有一个有趣的情况 - 我有一个表行，当前，当我单击“展开”按钮时，它显示它是隐藏的对应项。包含展开按钮的原始（未隐藏）行...

javascript jquery events event-bubbling propagation

回答 10 投票 0

停止从冒泡刷到身体

我有一个图片轮播和一个图片库灯箱，它们都允许用户滑动浏览照片。但是，整个页面主体也有一个滑动事件，用于打开侧面板....

jquery swipe preventdefault event-bubbling stoppropagation

回答 1 投票 0

知道事件的前一个处理程序是否返回 false。 IE 中的 defaultPrevented < 9?

我在应用程序中放置了一个全局模式“正在加载，请稍候”。每次单击或时都会显示。这是通过分配<...来实现的我在应用程序中放置了一个全局模式“正在加载，请稍候”<div>。每次单击 <a> 或 <input type="button"> 时都会显示。这是通过在 <body> 中为 onclick 分配一个 onload 事件处理程序来实现的，以便在事件冒泡时执行它： <body onload="setup()">  </body> <script> function setup() { document.getElementsByTagName('body')[0].onclick = clickFunc; } function clickFunc(eventData) { var clickedElement = (window.event) ? event.srcElement : eventData.target; if (someConditions) { document.getElementById('modal').style.display = "block"; } } </script> 现在，我在标记中有一些组件（我无法控制它们）在它们的 return false 中执行 onclick。这会导致模态弹出窗口显示，并在出现confirm()且用户拒绝时停留在那里。处理这个问题的正确方法可能是 preventDefault()，这样事件就不会冒泡，如 event.preventDefault() vs. return false 中所解释的那样。但是我无法控制那部分，所以：有没有办法（最好是非 jquery+跨浏览器）知道事件处理程序先前执行的结果（在较低级别）？如果没有，我想只要组件的<div>包含onclick，我就不得不避免显示模态return false。这是一个用于测试的JSFiddle。更新 Bergi 下面的回答是我一直在寻找的。不过，defaultPrevented IE 好像不支持< 9. Is there an equivalent/workaround to achieve that in IE < 9? 您可以检查 (window.event ? event.defaultPrevented : eventData.isDefaultPrevented()) == false 以捕获具有 not 返回的传播事件 false.

javascript html event-handling onclick event-bubbling

回答 1 投票 0

在链接内的可内容块，如何防止重定向，但让文本选择的位置发生变化？

这里是演示：http:/jsfiddle.netqh7Sq我想能够编辑span里面的链接，其实我可以通过部分防止冒泡传播的块状小节变化的动作。请不要建议...

javascript hyperlink contenteditable event-bubbling

回答 2 投票 0

reactJS - 为一个元素添加一个事件处理程序，而这个元素此时可能存在，也可能不存在。

我现在还不能回答问题，但我觉得既然这个问题我花了一些日子才解决，我应该把解决方法以我唯一能做的方式--作为一个问题发布出来。如果你有更好的 ...

events event-bubbling

回答 1 投票 0

材质ui选择改变时不冒泡。

我有一个div，其中有一个素材ui选择，素材uiTextField和一个普通html选择。这个div有一个onchange事件，它只是控制台记录事件.target.value。一旦发生onchange事件，...