jQuery：“提交”事件的魔力答案

【问题标题】：jQuery: Magic of "submit" eventjQuery：“提交”事件的魔力
【发布时间】：2013-07-24 08:46:59
【问题描述】：

这是简单的html：

<form method="post">
    <input type="hidden" name="default_action" value="default_action_value" />
    <input type="text" name="count" value="1" />
    <input type="submit" value="Button!" />
    <button class="btn" type="submit" name="action" value="action value">Button 2!</button>
</form>

和js代码：

(function (window, document, $, undefined) {$(document).ready(function($){
    var $doc = $(document);
    $doc.on('submit', 'form', function (e) {
        console.log('submit form!');        
        e.preventDefault();
    })
    .on('click', 'form', function (e) { 
        console.log('click on form (propagation)!');
    })
    .on('click', 'form :submit', function (e) {
        console.log('click on button!');
    });
});})(this, document, jQuery);

(fiddle)

当我点击任何提交按钮时，控制台中会出现以下消息：

点击按钮！

点击表单（传播）！

提交表格！

是的，好的。正如计划。但是当将光标设置到文本字段并按“Enter”（未单击按钮）时，控制台消息：

点击表单（传播）！

点击按钮！

点击表单（传播）！

提交表格！

o_O?怎么回事？！提交按钮没有被点击！这对我来说很神奇..

现在从 html 中删除提交按钮：

<form method="post">
    <input type="hidden" name="default_action" value="default_action_value" />
    <input type="text" name="count" value="1" />
</form>

(fiddle)

并尝试通过“Enter”按钮提交表单。控制台日志：

点击表单（传播）！

提交表格！

在前面的示例中可以看到。但是为什么 jQuery 会为第一个找到的提交按钮触发事件“点击”？

我的初始任务是定义“提交”事件的来源 - 单击提交按钮或按“Enter”。但是如何做到这一点，如果 jQuery 在真正按下“Enter”时触发“点击”提交按钮？如何？为什么？

【问题讨论】：

不是 jquery not jquery 错误。所以它使浏览器:-(

标签： jquery events button input submit

【解决方案1】：

我认为这是根据最新的 HTML5 规范。

按下“Enter”键会在第一个定位元素上触发“click”事件，这就是为什么您会看到其中一个按钮只触发了一次 click 事件。

如果在表单中按回车时不需要触发按钮上的点击事件，可以在输入按键事件中过滤掉回车键事件

$('input[type="text"]').keypress(function (e) {
   var code = e.keyCode || e.which;
    if (code === 13) {
        e.preventDefault();
        $("form").submit(); 
    }
});

还有其他解决方法，例如使用“按钮”元素类型（并连接点击事件以进行表单提交）而不是使用“输入”类型提交。将 type="submit" 更改为 type="button" 也会阻止在提交时触发点击。

【讨论】：