input `type = image` onclick решение работает, но почему?

Question

У меня возникла проблема с использованием тега type=image для ввода onclick для запуска некоторого JavaScript.Прекрасно работает с вводом type=button, но при использовании для ввода изображений он запускает сценарий, который изменяет DOM (добавлены изображения на div), но через доли секунды возвращается к странице по умолчанию, добавленныйизображения, показывающие кратковременную вспышку, а затем исчезающие.

Итак, с помощью Google я в итоге нашел решение.Я изменил:

<input type="image" id="greenGoButton" src="Images2/goButton.png" alt="Submit" onclick="loopForm(document.thisForm); getPlates(document.thisForm);">

на:

<input type="image" id="greenGoButton" src="Images2/goButton.png" alt="Submit" onclick="loopForm(document.thisForm); getPlates(document.thisForm); return false;">

Итак, добавление оператора return false; исправило его.

Но почему?Это меня беспокоит.Почему он работает без кнопки return false, а не при использовании изображения вместо?Наверняка в интернете полно кнопок из изображений.

Answer 1

По умолчанию type='image' создает кнопку, которая отправляет вмещающую форму и перезагружает страницу, добавляя return false в конце обработчика кликов, вы говорите Javascript, чтобы предотвратить поведение по умолчанию, при котором форма отправляется иперезагрузка страницы.

Вы также можете получить доступ к объекту события внутри обработчика щелчка и вызвать preventDefault() на нем, не выполняя return false в конце;event.preventDefault(), что также делает то же самое.

Короче говоря, return false в конце обработчика событий предотвращает поведение по умолчанию