addeventlistener 相关问题

如何监听上下文菜单项上的事件？

我正在尝试监听浏览器默认上下文菜单（不是自定义上下文菜单）上的“在新选项卡中打开链接”上下文菜单项的单击。我想在之前做一些 javascript

HTML 表单问题 - form.addEventListener 不起作用

我正在构建一个网络应用程序，但无法让我的表单提交响应。我正在使用 firebase，希望将响应存储在数据库中。 我的 HTML 表单代码： 我正在构建一个网络应用程序，但无法让我的表单提交响应。我正在使用 firebase，希望将响应存储在数据库中。 我的 HTML 表单代码： <form action="#" method="POST" class="u-clearfix u-form-spacing-10 u-form-vertical u-inner-form" style="padding: 10px;" id="waitlist"> <div class="u-form-group u-form-name"> <label for="name" class="u-label">Name</label> <input type="text" placeholder="Enter your Name" id="name" name="name" class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name"> </div> <div class="u-form-email u-form-group"> <label for="email" class="u-label">Email</label> <input type="email" placeholder="Enter a valid email address" id="email" name="email" class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name"> </div> <div class="u-form-group u-form-phone u-form-group-3"> <label for="phone" class="u-label">Phone(Optional)</label> <input type="tel" pattern="[\(\-]?([0-9]{3})[\)\-]?[\/\s]?([0-9\-]{3,9})" placeholder="Enter Phone #" id="phone" name="phone" class="u-grey-10 u-input u-input-rectangle u-radius-10" autocomplete="tel"> </div> <div class="u-align-left u-form-group u-form-submit"> <button type="submit" class="u-active-palette-3-base u-border-none u-btn u-btn-round u-btn-submit u-button-style u-hover-palette-3-base u-palette-1-base u-radius-10 u-btn-1">Submit</button> </div> </form> 我的Javascript： <script type="module"> document.addEventListener("DOMContentLoaded", function () { console.log("Page fully loaded"); const form = document.querySelector("#waitlist"); const thankYouMessage = document.getElementById("thank-you-message"); if (!form) { console.error("Form #waitlist not found"); return; } form.addEventListener("submit", async function (e) { e.preventDefault(); try { console.log("Form submitted"); const name = document.getElementById("name").value; const email = document.getElementById("email").value; const phone = document.getElementById("phone").value; const collectionRef = collection(firestore, 'responses'); await addDoc(collectionRef, { name: name, email: email, phone: phone, timestamp: firebase.firestore.FieldValue.serverTimestamp() }); document.getElementById("name").value = ""; document.getElementById("email").value = ""; document.getElementById("phone").value = ""; thankYouMessage.style.display = "block"; } catch (error) { console.error("Error adding response. Please try again later.", error); thankYouMessage.innerText = "Sorry, something went wrong. Please try again."; thankYouMessage.style.color = "red"; thankYouMessage.style.display = "block"; } }); }); </script> 我正在尝试在网络控制台中使用断点，我发现一切都“很好”，直到到达下面的行，然后它一直跳到底部。 form.addEventListener("submit", async function (e) { 我是个十足的菜鸟，还没有像我现在知道的那样使用 github。我的网站加载正确，但我只有一种表单。当我点击提交时，什么也没有发生。在后端，它卡在 addEventListener 的那一行上。 我遇到的一些错误： (index):299 未捕获类型错误：form.addEventListener 不是函数 在 HTML 文档中。 （（索引）：299：12） DOMException：无法在“Element”上执行“querySelectorAll” （但我没有在代码的任何部分使用 querySelectorALL。） 使用 document.getElementById 而不是 querySelector。 form = document.getElementById("#awaitlist") form.addEventListener("submit", async function() {})

事件侦听器即使在被调用后也没有响应

我的列表容器上使用的事件侦听器需要在单击时做出响应，并在单击文本时将列表标记为选中，如果单击跨度则删除列表项 `const InputBox = document.getElement...

以编程方式创建元素后未处理 Ondragstart 事件

我正在创建一个 Web 构建器，我使用 svelte 来促进 UI 的某些功能，但 Web 构建器本身几乎是纯 JavaScript。我创建了一个具有不同可拖动功能的工具面板

单击切换时侧边栏未打开。元素

我目前正在开发一个项目，用户希望在标题上的汉堡按钮不可见时能够打开侧边栏。为了完成这个任务，我做了一个按钮，只是......

更改滚动上的固定背景图像

如标题中所述，我正在尝试更改滚动上的背景图像并轻松添加漂亮的过渡。 背景图像应该固定并保持在适当的位置。内容动人...

在类中，在另一个方法中调用 addEventlistener 的方法中的元素 HTML

（我是法国人，我会尝试用英语解释，但如果你听不懂，我很抱歉）。 我在 MDN 上查找过，并尝试在这里找到答案，但我认为我没有使用好的关键字。 所以，...

Javascript-使用 AddEventlistener 重新加载页面

我想在javascript中使用AddEventListener在我按Enter键时重新加载页面（就像F5自动执行的那样），总的来说我想知道如何操作已经定义的快捷方式...

单击网格内的 div 时事件监听器目标不正确

我有一个附加到包装元素的事件侦听器，该元素检查 e.target 以查看它是否包含我正在寻找的类。如果是这样，那么回调函数其余部分的有效负载就会消失。 ...

我有一个定时测验，我需要将用户名输入保存到本地存储

我创建了一个定时测验，将分数保存到本地存储中，但不保存用户输入的用户名。我将包含应用程序的最后一个 html 文档，分数是从游戏脚本中保存的...

我必须多次使用我的脚本与 document.getElementById("")

我正在制作一个布局，其中每个框都必须使用... id =“top1”，id =“top2”，id =“top3”等...这样当您单击它时，它就会转到文档顶部，但我找不到...

React-Navigation，嵌套导航问题

我需要根据条件在两个堆栈组之间导航（如果用户允许权限 - 导航到不同的堆栈组，否则停留在用户可以允许权限的屏幕中...

带有 Javascript 的浏览器内屏幕保护程序

上下文：对于自助服务终端应用程序，出于脱离主题的原因（请参阅此处），我不依赖操作系统屏幕保护程序，而是在 JS 中实现屏幕保护程序：黑色模态层（全宽、全宽）高度）

使用 HTML 和 Javascript 的模态

我正在尝试制作两个由相应按钮触发的模态。这是我的代码： 我正在尝试制作两个由相应按钮触发的模态。这是我的代码： <!-- Trigger/Open The Modal --> <p><button id="seeBtn" type="button">SEE</button></p> <p><button id="hearBtn" type="button">HEAR</button></p> <!-- The Modal --> <div class="modal modal-content" id="seeModal"> <span class="close">&times;</span> <p>See their profile</p> <p>See their profile</p> <p>See their profile</p> <p>See their profile</p> </div> <!-- The Modal --> <div class="modal modal-content" id="hearModal"> <span class="close" id="close">&times;</span> <p>Hear their Stories</p> <p>Hear their Stories</p> <p>Hear their Stories</p> <p>Hear their Stories</p> </div> <script> const seeModal = document.getElementById("seeModal"); const hearModal = document.getElementById("hearModal"); const seeBtn = document.getElementById("seeBtn"); const hearBtn = document.getElementById("hearBtn"); const closeModal = document.getElementById("close"); itemModal = function(modal,open,close) { var modal; var open; var close; open.addEventListener("click", function(){modal.style.display = "block";}); close.onclick = function(){modal.style.display = "none";}; } itemModal(seeModal,seeBtn,closeModal); itemModal(hearModal,hearBtn,closeModal); </script> 上面的代码在某种程度上是有效的。 “seeModal”将打开，但不会关闭。 “hearModal”将完美地完成这两件事。 我不确定它是否与此有关，但我将其输入到 Omeka S 中的 HTML 块中。这可能就是 模态方法不起作用的原因。 我尝试了“addEventListener”和“onclick”——CodePen 告诉我这两个都是空的。我尝试了 模态方法（参见此处：https://youtu.be/TAB_v6yBXIE?si=GM9fpckBCpePWf6N），但我有一种感觉 Omeka S 的 HTML 净化器不熟悉它，因为代码出来时相当混乱我试过。我还尝试了箭头功能，当我单击按钮并期望发生一些事情时，我的计算机上出现了一片空白（“嗯？”）。当我复制并粘贴 W3School 的模态教程 (https://www.w3schools.com/howto/howto_css_modals.asp#gsc.tab=0) 时，它工作得很好，直到我想将它复制到多个按钮为止。当我查看 Azurespeed 的 ChatGPT 代码生成器 (https://www.azurespeed.com/ChatGPT/GenerateCode) 时，发现有些内容未定义。我知道我对 JS 很生疏，但这让我感觉像用头撞墙。 我的目标是单击按钮并显示相应的模式。当某人查看完模式后，他们可以单击关闭按钮使其消失。该操作需要可重复且易于为多个按钮设置。大多数情况下，我需要帮助弄清楚为什么这些功能似乎有效，但只是部分时间。 看起来您只有一个带有 id="close" 的关闭按钮，并且您将相同的引用传递给 itemModal 函数。 解决这个问题的一个简单方法是在 itemModal 函数中查找关闭按钮。在这种情况下，您不需要将其传递到外面，您的模态框将选择位于模态框本身内部的一个。这是一个例子： const seeModal = document.getElementById("seeModal"); const hearModal = document.getElementById("hearModal"); const seeBtn = document.getElementById("seeBtn"); const hearBtn = document.getElementById("hearBtn"); itemModal = function(modal,open){ var modal; var open; var close = modal.querySelector('.close'); open.addEventListener("click", function(){modal.style.display = "block";}); close.onclick = function(){modal.style.display = "none";}; } itemModal(seeModal,seeBtn); itemModal(hearModal,hearBtn);

添加事件监听器不起作用，即当我单击我应该单击的内容时，我想要添加事件监听器执行的操作没有发生

我想在单击按钮时向表中添加另一行，但是当我单击按钮时，什么也没有发生。我不知道是否我错误地使用了 addeventlistener 还是因为其他原因...

带有选项的 Angular addEventListener

如何在 Angular 5 中使用带有选项的 addEventListener 函数？如果有文件的话可以指点我一下吗？谢谢 target.addEventListener(类型, 监听器[, 选项]); 目标。

删除动态React组件中的事件监听器

询问有关在动态反应组件中添加和删除事件侦听器的建议。 所以，我有一个包含对象列表的功能组件。 它的渲染方式如下： objectList.map( (项目) ...

如何将一个函数中定义的变量作为参数传递给 Javascript 中的 addEventListener 函数？

我是 javascript 新手，我对变量作用域的工作原理感到困惑。 我有一个传单 js 地图，上面有多个标记，单击时会弹出风电场名称。我的目标是当

为什么 console.trace() 在使用带有 {once: true } 选项的事件侦听器时显示不断增长的堆栈跟踪？

我有这个内联js代码。 让btn = document.querySelector(“按钮”); btn.addEventListener("click", foo, { Once: true }); 函数 foo() { btn.addEventListener("点击", bar, { 一次: true }...

“touchmove”事件在 React 中无法按预期工作

我正在 NextJS 中构建一个应用程序。我正在尝试创建一个窗口管理器，您可以在其中拖动面板并调整面板大小。 在桌面上一切正常，但在移动设备上，事件侦听器的行为不正常