stoppropagation 相关问题

stopPropagation是事件对象的一种方法，可以阻止当前事件的进一步传播。

为了使页面符合 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 的计时器即可。

bootstrap-modal keypress ng-bootstrap stoppropagation

回答 2 投票 0

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

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

javascript html scroll stoppropagation

回答 5 投票 0

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

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

reactjs next.js antd preventdefault stoppropagation

回答 1 投票 0

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

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

reactjs iframe mobile mobile-safari stoppropagation

回答 1 投票 0

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

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

javascript vue.js input vuejs3 stoppropagation

回答 1 投票 0

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

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

javascript jquery hammer.js stoppropagation

回答 8 投票 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

事件传播没有停止

我有以下代码。我有以下代码。 <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 的事件处理程序。请帮助。

stoppropagation event-propagation

回答 0 投票 0

停止从冒泡刷到身体

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

jquery swipe preventdefault event-bubbling stoppropagation

回答 1 投票 0

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

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

javascript html css stoppropagation

回答 1 投票 0

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

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