jquery 如何防止表单提交触发`button：first,onclick()`？

7nbnzgx9 于 2023-04-29 发布在 jQuery

关注(0)|答案(2)|浏览(117)

每次我按回车键提交表单时，关联表单中第一个<button>上的click()函数就会被触发。问题（除了我觉得这个行为很奇怪之外）是它实际上是一个click事件，与实际单击按钮没有区别。如果它触发了我的提交按钮，我会很好。
问题是，在这种情况下，第一个按钮与实际的表单无关，它实际上是在一个隐藏的弹出窗口中。
所以确切的问题是：为什么会这样？我该如何预防呢？如何区分这个“假点击”事件与真实的事件？
(this是一个非常简单的例子;实际代码使用的是jQuery（如果jQuery碰巧承认这一点，并且有一个修复方法），但实际问题与jQuery无关）

<form>
    <input>
    <button onclick="alert('button A click');">Button A</button>
    <button onclick="alert('button B click');">Button B</button>
    <input type="submit" value="Submit Button">
</form>

http://jsfiddle.net/NexHC/2/
请不要建议“移动按钮”

jquery

来源：https://stackoverflow.com/questions/6946342/how-to-prevent-form-submit-from-triggering-buttonfirst-onclick

2条答案

按热度按时间

hk8txs481#

剪-

编辑

<form>
    <input>
    <button type="button" onclick="alert('button A click');">Button A</button>
    <button type="button" onclick="alert('button A click');">Button B</button>
    <input type="submit" onclick="alert('button Submit click');" value="Submit Button">
</form>

我收回我的话。原因比这更具体更简单Submit是w3c指定的<button>的默认类型。因此，通过在表单上保留按钮type属性为空，您可以创建三个提交按钮，并且当您按Enter键时，它会选择第一个按钮（喜欢这个网站上的<kbd>样式：P）。请参阅这里的w3c信息和here的更新fiddle

赞(0）回复(0）举报 2023-04-29

5gfr0r5j2#

我的建议是，如果<button>与表单无关，并且还控制着一个隐藏的弹出窗口，那么将其从<form>的上下文中取出，并将其放置在其他地方。这也将解决您的点击问题。

赞(0）回复(0）举报 2023-04-29