Это простой 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 (не нажимая на кнопку), консольные сообщения:
нажмите на форму (распространение)!
нажмите на кнопку!
нажмите на форму (распространение)!
представить форму!
о_О? ВТФ?! Кнопка отправки не нажата! Для меня это настоящее волшебство..
Теперь удалите кнопки отправки из html:
<form method="post">
<input type="hidden" name="default_action" value="default_action_value" />
<input type="text" name="count" value="1" />
</form>
И попробуйте отправить форму с помощью кнопки Enter. Журнал консоли:
нажмите на форму (распространение)!
представить форму!
Что и ожидалось увидеть в предыдущем примере. Но почему jQuery запускает событие «щелчок» для первой найденной кнопки отправки?
Моя первоначальная задача — определить источник события «отправить» — нажмите кнопку «Отправить» или нажмите «Ввод». Но как это сделать, если jQuery запускает «щелчок» по кнопке отправки, когда действительно нажимается Enter? Как? Почему?
