event-handling 相关问题

很惊讶，我在从 JS 提交表单时遇到了这个奇怪的问题。问题：考虑使用提交按钮和锚链接两种方式提交的简单表单很惊讶，我在从 JS 提交表单时遇到了这个奇怪的问题。问题：考虑使用 submit 按钮和 anchor link 两种方式提交的简单表单 <form method="POST" action="page.html" name="foobar" id="test"> <input type="text" /> <input type="submit" /> </form> <a href="#" onclick="document.getElementById('test').submit();">click me</a> 捕获提交事件的函数 document.getElementById('test').onsubmit = function() { // Same result with // * document.foobar.onsubmit // * document.forms['foobar'].onsubmit alert('foobar'); return false; } 现在，当通过单击 submit 按钮提交表单时，我会收到警报，但单击链接时则不会收到警报。为什么会这样？小提琴显示问题为了提供合理明确的答案，HTML 表单提交算法第 5 项规定，如果表单未通过调用 Submit 方法提交，则仅调度提交事件（这意味着如果通过按钮提交，则仅调度提交事件）或其他隐式方法，例如，当焦点位于输入类型文本元素上时按 Enter 键）。如果没有调度提交事件，则不会调用提交处理程序。这与 DOM 2 HTML 规范不同，后者规定提交方法应该执行提交按钮的操作。所以如果你想使用脚本提交表单，你应该手动调用提交监听器。如果监听器是使用 addEventListener 添加的，那么您需要记住这一点并调用它，因为您无法通过检查表单来发现它（如下所示）。如果侦听器设置为内联，或添加到 DOM onsubmit 属性，您可以执行以下操作： <form onsubmit="return validate(this);" ...> ... </form> <button onclick="doSubmit()">submit form</button> <script> function doSubmit() { var form = document.forms[0]; if (form.onsubmit) { var result = form.onsubmit.call(form); } if (result !== false) { form.submit(); } } </script> 如果您需要传递参数或做其他事情，生活会更艰难。这就是 form.submit 的行为方式；表单的 onsubmit 事件处理程序（例如，onsubmit="return false;") 调用此方法时不会被触发基于 Gecko 的应用程序。一般来说，不能保证由 HTML 用户代理调用使 onsubmit 调用一个函数并简单地调用该函数 onclick。您可以手动构造和分派提交事件，而不是使用表单 submit() 函数以编程方式提交表单。 const buttonEl = document.getElementById('your-button'); const formEl = document.getElementById('your-form'); buttonEl.addEventListener('click', () => { const submitEvent = new Event('submit'); formEl.dispatchEvent(submitEvent); }); 这意味着表单提交事件上的任何其他侦听器都将触发： formEl.addEventListener('submit', (submitEvent) => { console.log('The form submitted!'); }); 使用表单元素的requestSubmit()方法提交表单并触发事件。引用 MDN 上的 HTMLFormElement: requestSubmit() 方法: 显而易见的问题是：既然我们从一开始就有了 Submit() 方法，为什么还要存在这个方法？答案很简单。 Submit() 提交表单，但仅此而已。另一方面，requestSubmit() 的作用就像单击了提交按钮一样。表单的内容经过验证，只有验证成功后才会提交表单。提交表单后，提交事件将发送回表单对象。

javascript forms event-handling

回答 4 投票 0

无法检测动态生成的复选框的更改

说明：我面临的问题是，动态生成的复选框在单击时不会触发更改事件。为了解决这个问题，我使用了 $(document).on("change", ".integration-

javascript html jquery event-handling jquery-events

回答 1 投票 0

React：从事件处理程序内部的自定义挂钩访问更新状态

在 React 组件中，我面临事件处理程序和自定义挂钩之间状态同步的挑战。事件处理程序更新状态变量，我需要访问最新值...

javascript reactjs react-hooks event-handling

回答 2 投票 0

使用filebeat + kafka作为两个微服务之间的消息代理系统

情况如下：我们有 2 个微服务 A 和 B，我们想要从 A 向 B 发送事件。这些都是简单的事件，每次用户发出某个请求时都会产生，没有复杂的行为

events apache-kafka event-handling message-queue filebeat

回答 1 投票 0

访问事件之外的两个输入的值

我想访问两个输入的值，以便在设置它们的值后立即进行计算 //我想访问两个输入的值，以便在它们</desc>时立即进行计算 <question vote="1"> <p>我想访问两个输入的值，以便在设置它们的值后立即进行计算</p> <pre><code><script> //I want to access value of the two inputs to make calculation immediately when their values are set const heightInputEl = document.querySelector('.height-input'); const weightInputEl = document.querySelector('.weight-input'); heightInputEl.addEventListener('input', function (e) { const height = Number(e.target.value); const mtrsqr = Math.abs(Math.pow(height / 100, 2)); }); weightInputEl.addEventListener('input', function (e) { const weight = Number(e.target.value); }); </script> </code></pre> </question> <answer tick="false" vote="1"> <pre><code>var mtrsqr var weight const heightInputEl = document.querySelector('.height-input'); const weightInputEl = document.querySelector('.weight-input'); heightInputEl.addEventListener('input', () => { let height = Number(heightInputEl.value); mtrsqr = Math.abs(Math.pow(height / 100, 2)); }); weightInputEl.addEventListener('input', () => { weight = Number(weightInputEl.value); }); </code></pre> <p>通过在事件之外定义 mtrsqr 和权重，我们可以在任何地方访问它们</p> </answer> <answer tick="false" vote="0"> <p>您的代码可能未运行，因为它甚至在加载上述 html 元素之前就已运行。尝试 setTimeout ，它应该可以完美地工作，如使用您的代码的本示例所示 - <a href="https://jsfiddle.net/hiyer/sL18nqe7/36/" rel="nofollow noreferrer">https://jsfiddle.net/hiyer/sL18nqe7/36/</a></p> <pre><code><html> <script> //i want to access value of the two input to make calculation immediately they put in a value setTimeout( function (){ const heightInputEl = document.querySelector('.height-input'); const weightInputEl = document.querySelector('.weight-input'); heightInputEl.addEventListener('input', function (e) { const height = Number(e.target.value); const mtrsqr = Math.abs(Math.pow(height / 100, 2)); const mtrsqrEl = document.querySelector('#mtrsqr'); mtrsqrEl.textContent=""+mtrsqr; }); weightInputEl.addEventListener('change', function (e) { const weight = Number(e.target.value); const weightEL = document.querySelector('#weight'); weightEL.textContent=weight; }); },100); </script> <body> Height:<input class="height-input" value="10"/ > <br/> Weight:<input class="weight-input" value="10"> <br/> Mtrsqr:<label id="mtrsqr"></label> <br/> Weight:<label id="weight"></label> <br/> </body> </html> </code></pre> </answer> </body></html>

javascript input event-handling

回答 0 投票 0

获取事件外两个输入的值

我想访问两个输入的值以在它们输入值后立即进行计算 //我想访问两个输入的值以立即进行计算，它们放入 va...</desc> <question vote="0"> <p>我想访问两个输入的值，以便在它们输入值后立即进行计算</p> <pre><code><script> //i want to access value of the two input to make calculation immediately they put in a value const heightInputEl = document.querySelector('.height-input'); const weightInputEl = document.querySelector('.weight-input'); heightInputEl.addEventListener('input', function (e) { const height = Number(e.target.value); const mtrsqr = Math.abs(Math.pow(height / 100, 2)); }); weightInputEl.addEventListener('input', function (e) { const weight = Number(e.target.value); }); </script> </code></pre> </question> <answer tick="false" vote="0"> <pre><code>var mtrsqr var weight const heightInputEl = document.querySelector('.height-input'); const weightInputEl = document.querySelector('.weight-input'); heightInputEl.addEventListener('input', () => { let height = Number(heightInputEl.value); mtrsqr = Math.abs(Math.pow(height / 100, 2)); }); weightInputEl.addEventListener('input', () => { weight = Number(weightInputEl.value); }); </code></pre> <p>通过在事件之外定义 mtrsqr 和权重，我们可以在任何地方访问它们</p> </answer> </body></html>

javascript input event-handling

回答 0 投票 0

CKEditor5：以只读模式启用源代码视图

我正在尝试创建一个只读但允许源代码查看的CKEditor。当我使用 CKEditor 的只读模式时，源编辑插件被禁用。我正在寻找一种简单的方法来做到这一点，我确实......

event-handling ckeditor readonly ckeditor5

回答 1 投票 0

当我关注其他内容但又回到原始项目时，Keys.onPressed 停止工作

我面临着一些我无法解释的事情...... 我有这个代码：导入QtQuick 2.12 导入 QtQuick.Controls 2.0 导入 QtQuick.Controls.Styles 1.4 导入 QtGraphicalEffects 1.12 导入 QtQuick.LocalS...

qt event-handling qml qt5 keyboard-events

回答 1 投票 0

SWT 对 CR/Return 在 TextField 上触发的事件感到困惑

我对 SWT 相当陌生，发现在 TextField 上按“Return”（至少）会做三件事：为 SWT.KeyUp 创建一个事件，几微秒后，为 SWT.Dispose 创建一个事件，并且.. .

event-handling swt

回答 1 投票 0

尝试在控制台中操作dom对象

我正在尝试学习如何操作现有的 DOM，同时构建浏览器扩展，但我似乎无法找到一个实例的正确过程：我是其中一页

javascript reactjs event-handling dom-events

回答 1 投票 0

为什么我不能调用SetText呢

我想在单击此按钮时在 EditText 中显示文本。但使用它不允许这样做。 `类 MainActivity : AppCompatActivity() { 私有值 MY_LOG = "myLog" Lateinit var 绑定：

android kotlin onclick event-handling settext

回答 1 投票 0

Telegram Bot：如何处理自定义回复消息以及来自键盘的消息？

我使用node-telegram-bot-api为一家花店创建了一个Telegram Bot。我向用户提出的一些问题可以使用回复键盘进行回复（例如，交货时间和日期，或者......

javascript event-handling telegram-bot node-telegram-bot-api

回答 1 投票 0

行的 JavaScript 单击处理程序接收单元格作为目标

我有一个多列、多行的表。每行都有一个唯一的“数据索引”属性。我在每一行添加了一个单击事件侦听器。然而，当我点击该行时，我碰巧所在的单元格是...

javascript event-handling

回答 1 投票 0

如何在用户离开页面之前运行代码？

我尝试过的任何方法都不起作用。我需要在用户完全离开页面之前运行一些代码： window.onbeforeunload = 函数(){ 警报（1）； } window.addEventListener("卸载前", func...

javascript reactjs event-handling onbeforeunload

回答 1 投票 0

c# 将项目拖动到另一个面板时忽略 MouseUp

我正在尝试将项目从 ItemList 拖到我的 TreeList 中。我编写了listView1_MouseDown、listView1_MouseMove、treeView1_MouseMove 和treeView1_MouseUp 函数。当我在 treeVi 中移动鼠标时...

c# winforms listview event-handling treeview

回答 1 投票 0

event-handling 相关问题

最新问题