Почему форма submit event срабатывает, когда я остановил распространение на уровне кнопки submit?

Question

Почему форма submit event срабатывает, когда я остановил распространение на уровне кнопки submit?

HTML

<form>

    <input type='text'>

    <button type='submit'>Submit</button>

</form>

JavaScript

$('form').on('submit', function(e) {

    alert('submit');

    e.preventDefault();

});



$('button').on('click', function(e) {

    e.stopPropagation();

    alert('clicked');

});

Скрипка

После просмотра великолепного видео здесь я понимаю, что когда я нажимаю кнопку отправить, событие всплывает до формы, и затем запускается событие отправки формы. Это объясняет, почему "нажал" предупреждается перед "отправить" (прежде чем я добавлю e.stopPropagation() в обработчик кнопок).

Но когда я добавляю e.stopPropagation() в обработчик кнопок, "submit" все еще предупреждается. Почему? Я думал это stopPropagation предотвращает бурление события до form, и поэтому слушатель form.on('submit') не должен "слышать" событие.

974 3

jQuery javascript forms events javascript-events

3 ответов:

Comments

Ничего не найдено.

Halcyon · Accepted Answer · 2015-04-30 20:35:00

Когда вы нажимаете кнопку отправить в форме, событие click появляется на кнопке и всплывает. Событие submit появляется на форме (а не на кнопке)и всплывает оттуда.

Если вы остановите распространение события click, вы просто остановите фазу пузырьков события click. Это никак не влияет на событие отправки.

Чтобы остановить действие submit, необходимо добавить проверку в обработчик submit.

Имейте в виду, что добавление e.preventDefault() в обработчик щелчка в кнопке является недостаточно, чтобы предотвратить появление события submit, так как существует больше способов отправить форму, чем просто нажать кнопку. (например, нажав enter в поле ввода).

adeneo · Accepted Answer · 2015-04-30 20:28:29

См. обработчик
$('button').on('click', function(e) {
    e.stopPropagation();
Обратите внимание, что событие click, таким образом, вы останавливаете распространение события click вверх по цепочке, и это не взаимодействует с событием submit Вообще, которое все еще срабатывает как действие по умолчанию кнопки submit, чтобы отправить форму, и способ остановить это, чтобы предотвратить это действие по умолчанию с preventDefault

Другими словами, stopPropagation только останавливает распространение текущего обрабатываемого события на родительские элементы, но не останавливает поведение по умолчанию элемент, который был бы preventDefault !

KJ Price · Accepted Answer · 2015-04-30 20:29:51

Вам также нужно e.preventDefault(); нажать на кнопку:

$('form').on('submit', function(e) {
    alert('submit');
    e.preventDefault();
});

$('button').on('click', function(e) {
    e.preventDefault();
    alert('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type='text'/>
    <button type='submit'>Submit</button>
</form>