stoppropagation 相关问题

如何强制事件处理程序优先？

我有 JavaScript 代码，在其中我更改了无效事件上的输入字段 css 类，以将错误类添加到具有类 form-row 的父 div。 我还附加了一个事件侦听器...

防止滑动手势传播到 .NET MAUI 中的父控件上？

有没有办法阻止 .NET MAUI 中的控件将滑动手势传播到其父控件？ 对于这个项目，我在 TabView 中使用 DXRangeSlider。两者都是免费的毛伊岛续...

event.stopPropagation 不适用于“点击”事件

我有一个带有事件和“stopPropagation”的纯JS代码。 该事件每次都会被调用，但“stopPropagation”仅在 Chrome 开发过程中阻止其他链式事件...

如何避免 ng-bootstrap ngbModal 组件内的键绑定传播？

为了使页面符合 ADA，我们需要能够通过在“OPEN”按钮上单击/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。 为了保持页面符合 ADA，我们需要能够通过单击“打开”按钮上的/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。 <div (keyup.enter)="openModal($event)" (keyup.space)="openModal($event) (click)="openModal($event)">Open Modal</div> 模态页面内： <button>Close</button> 按关闭按钮上的 Enter 键将关闭模态框，返回到调用的 div 元素并重新执行 ENTER 键并再次重新打开模态框。我在 openModal 函数内和模态本身内尝试了 stoppropagation、return false、cancelbubble，但均无济于事，绑定的 ENTER 键不断在两个页面上/下冒泡。 我能够通过模态中的以下实现来解决它： @HostListener("document:keydown", ["$event"]) onKeydownHandler( event: KeyboardEvent ) { if(event.key === "Enter"){ event.preventDefault(); event.stopImmediatePropagation(); } } 为“document:keydown”添加 PreventDefault() 或 stopImmediatePropagation() 将会影响页面的其他正常功能。 相反，只需添加 setTimeout() 并设置 200ms 的计时器即可。

如何禁用外部元素的滚动？

我在页面中有一个垂直滚动的 div，它也可以垂直滚动。 当子div用鼠标滚轮滚动并到达滚动条的顶部或底部时，页面（body）b...

stopPropagation 不适用于 Ant 设计下拉菜单

我有一个卡片组件包裹在 nextjs 链接内。该卡片由正文和页脚组成。这是我的卡片页脚。在 cardFooter 内部，我有一个包含两个项目的 Ant Design 下拉菜单。尽你所能...

移动网络上的 iframe 上的按钮不可点击

我尝试将按钮绝对放置在 iframe 上，但当我在移动网络中查看我的应用程序时，没有注册按钮单击。相反，点击会在下面的 iframe 上注册...

如何将搜索栏中选定的 Item 添加到新的 vue3 js 数组中？

我正在尝试将下拉列表中的所选项目添加到新数组并将其显示在页面上。我在输入字段上做了一个 onblur 事件，目的是当我点击外部时隐藏下拉菜单，但现在......

如何使用 Hammer.js 2.0 stopPropagation() ？

我有一个父级和子级div。对子级进行平移/拖动不应影响父级。这是一个类似的问题，但一年前就被问到了，我正在使用更新版本的 Hammer.js 和 j...

如何防止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/

事件传播没有停止

我有以下代码。 我有以下代码。 <div onClick={handleDescrition} className="tasks-main"> <div className="task-container"> <div className="title_actions"> <div className="title"> <label className="radio-container"> <span onClick={ event => { handleTempHide(elem._id); event.stopPropagation(); }} onMouseOver={() => handleCheckMark(elem._id)} onMouseOut={() => removeCheckMark(elem._id)} className="checkmark" > {isChecked[elem._id] && ( <i className="fa-thin fa-check"></i> )} </span> <p>{elem.name}</p> <input type="radio" checked={isChecked[elem._id]} /> </label> </div> 当我单击具有类“checkmark”的 span 元素时，尽管我使用了停止传播方法，但它的事件处理程序与类名称为“tasks-main”的 div 的事件处理程序一起被调用。 总而言之，当我单击 span 元素时，也会单击 tasks-main 元素并调用其事件处理程序。我无法弄清楚为什么调用 tasks-main 的事件处理程序。 请帮助。

停止从冒泡刷到身体

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

尽管在子元素上调用了stopPropation()，但点击事件总是在父元素上发生。

我有一个看似微不足道的问题，但找不到原因。有一个最小的html结构。

当处理嵌套组件时，如何阻止 "Click "事件被触发？

我想做的是 创建一个 "调整大小 "的angular指令，允许用户拖动DOM元素的边界，并调用自定义的应用逻辑（完成），以确保点击不冒泡到父元素... ...

停止div内的div传播。

我有一个卡在另一个可点击的卡里面。在我的例子中，一张卡里面有一个旋转木马。在通常的情况下，我知道我必须使用@click.stop来防止打开父卡，当我点击......。

自动反应stopPropagation并阻止默认值

使用当前版本的react-dom和@ material-ui，我需要在相当多的地方停止Propagation和/或preventDefault。我从来没有遇到过像本文这样的问题，我想这不可能...

可点击离子卡内的按钮点击事件也执行父事件

我正在创建一个离子应用程序，当我单击卡时会触发模式，我面临的问题是，当我单击卡上的按钮时，模式也会打开，如何阻止这种情况发生。我是...

Bootstrap表单在验证失败时不会取消提交

我正在尝试创建一个表单，该表单将在提交时向用户发送电子邮件。事实是，我使用了Bootstrap的表单模板，并且当我通过电话提交它并邮寄了错误的值（电话号码...

如何正确选择表格单元格内的div

我创建了一个函数，可以根据用户的请求插入表行和数据。我被要求在表格单元格的右上角添加一个红色小方块（div），单击该小方块将删除表格行。 ...

标签上的stopPropagation事件

我很难理解为什么单击标签时无法停止传播。 Test ...