Question

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

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

点击按钮！

点击表格（传播）！

提交表格！

是的，好的。正如计划。但是当将光标设置到文本字段并按＆＃34;输入＆＃34; （未单击按钮），控制台消息：

点击表格（传播）！

点击按钮！

点击表格（传播）！

提交表格！

O_O？ WTF？没有点击提交按钮！这对我来说非常神奇......

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

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

(fiddle)

尝试通过＆＃34;输入＆＃34;提交表单按钮。控制台日志：

点击表格（传播）！

提交表格！

预计会在前面的示例中看到。但是为什么jQuery会触发事件＆＃39;点击＆＃39;首先找到提交按钮？

我的初始任务是提交＆＃39;的定义来源。事件 - 单击提交按钮或按＆＃34;输入＆＃34;。但是如果这样做，如果jQuery触发＆＃39;点击＆＃39;在真正按下时按下提交按钮＆＃34;输入＆＃34;？怎么样？为什么呢？

Answer 1

我认为这符合最新的HTML5规范。

在第一个定位元素上按'Enter'触发'click'事件，这就是为什么你看到click事件只针对其中一个按钮触发一次的原因。

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

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

还有其他解决方法，例如使用'button'元素类型（并挂钩click事件来执行表单提交），而不是使用类型为submit的“input”。将type =“submit”更改为type =“button”也可以防止在提交时触发点击。

jQuery：魔术“提交”事件

1 个答案: