0

这是简单的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);

（小提琴）

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

点击按钮！

点击表格（传播）！

提交表格！

是的，好的。正如计划。但是当将光标设置到文本字段并按“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>

（小提琴）

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

点击表格（传播）！

提交表格！

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

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

4

1 回答 1

0

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

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

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

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

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

于 2013-07-24T18:19:03.330 回答