dom-events 相关问题

DOM（文档对象模型）事件允许事件驱动的编程语言在DOM树内的元素节点上注册各种事件处理程序/侦听器。

使用GLightbox和React，为什么我的onClick方法在灯箱显示中不起作用？

我正在尝试触发附加到此脚本中元素的 onClick 函数。封闭的 div 作为 GLightbox (https://github.com/biati-digital/glightbox) 内联打开我试图让附加到此脚本中的 <button> 元素的 onClick 函数触发。封闭的 div 作为 GLightbox (https://github.com/biati-digital/glightbox) 内联对象打开。 import React, {useEffect} from 'react'; const GlightboxComponent = () => { useEffect(() => { const lightbox = GLightbox({ selector: '.glightbox-link', }); }, []); return ( <div> <a href="#lightbox-div" className="glightbox-link" data-type="inline" data-gallery="my-gallery">open lightbox</a> <div id="lightbox-div" style={{display: 'none'}}> <button onClick={() => console.log('click')}>mybutton</button> </div> </div> ) }; export default GlightboxComponent; 灯箱在 div 打开的范围内工作，但是当我单击按钮时没有任何反应。我找不到任何干扰的 css 或 javascript，所以我想知道问题是否是基于 React 和 Glightbox 之间的冲突。作为测试，我运行了一段等效的代码作为静态网站。 <!DOCTYPE html> <html> <head> <title>Title</title> <link href="/assets/vendor/glightbox/css/glightbox.css" rel="stylesheet"> </head> <body> <a href="#lightbox-div" class="lightbox-link" data-type="inline" data-gallery="my-gallery">open lightbox</a></p> <div id="lightbox-div" style="display: none"> <button onClick="console.log('click');">mybutton</button> </div> </body> <script src="/assets/vendor/glightbox/js/glightbox.js"></script> <script> const lightbox = GLightbox({ selector: '.lightbox-link', }); </script> </html> 在这种情况下，按钮上的 onClick 事件确实有效（将其作为灯箱打开并查看）。我的 React 代码中的脚本导入完全相同，并且使用相同的文件（并且是唯一使用的显式导入）。任何有关这个问题的见解将不胜感激，谢谢。此库复制您的 #lightbox-div 并将其粘贴到自己的 html 标记中。所以，事实上，react onClick 保留在 #lightbox-div 中，其中有 display: none。请注意，react onClick 和 native onclick 是不同的东西。

javascript reactjs dom-events

回答 1 投票 0

在使用 Bun.serve() 且没有框架的情况下提供 tsx 文件时，如何让 onClick 和 onChange 等 dom 事件正常工作

我正在尝试使用Bun及其优化的内置React库，无需框架即可构建一个简单的单页表单应用程序。我找到了处理图标和 CSS 的解决方法，但遇到了

reactjs dom-events bun react-dom-server

回答 1 投票 0

原生 JS 相当于 jQuery 委托

动态创建的 dom 元素上的事件委托的本机实现是什么？我尝试查看 jQuery 源代码，但无法遵循 .on 方法。注意：目前我附上 ev...

javascript dom dom-events event-delegation

回答 7 投票 0

如何可靠地拦截（并取消）contenteditable中的所有输入？

我需要捕获 contenteditable 元素中的所有输入并处理代码中的输入。基本上，我需要的是防止输入事件更改元素中的数据并知道数据是什么