Почему срабатывает onclick у кнопки?

Question

[Stepanya]

Почему выполняется onclick у кнопки при нажатии на энтер в инпуте?

<form onsubmit="alert('form-submit')">
    <input>
    <button onclick="alert('button')">button</button>
</form>

https://fiddle.jshell.net/oeq9tg4j/1/

Причем срабатывает только первая кнопка в форме и абсолютно не важно где находится инпут в форме.

<form onsubmit="alert('form-submit')">
    <button onclick="alert('button1')">button</button>
    <button onclick="alert('button2')">button</button>
    <button onclick="alert('button3')">button</button>
    <input>
</form>

https://fiddle.jshell.net/oeq9tg4j/2/

Answer 1

[Сергей delphinpro]

У кнопки атрибут type по умолчанию равен значению submit. И эта кнопка является кнопкой по умолчанию. Т.е. она нажимается энтером.
Срабатывает всегда первый сабмит.
Если вам нужны кнопки, не отправляющие форму - поставьте им атрибут type="button".

https://fiddle.jshell.net/oeq9tg4j/3/

Comments

[Stepanya]

Спасибо за ответ.

Как исключение от возможных ошибок в будущем, сделал так:

<form onsubmit="alert('form-submit')">
    <button type="submit" style="display: none;"></button>
    <button onclick="alert('button1')">button</button>
    <button onclick="alert('button2')">button</button>
    <button onclick="alert('button3')">button</button>
    <input>
</form>

[Сергей delphinpro]

Stepanya: просто проставьте type=button кнопкам =) зачем что то выдумывать

[Stepanya]

в проекте над которым я работаю имеет форма с огромным количеством достаточно ангуляровских сложных компонент и есть большая вероятность того, что кто-нибудь забудет, что компонент находится в форме и всё-таки добавит кнопку без типа, что приведет к вызову этой кнопки

Answer 2

[Alexander Pushkarev]

Стандартная функция, которая дёргает onsubmit у формы это onclick.

На примере https://fiddle.jshell.net/oeq9tg4j/2/ срабатывают все кнопки.

Comments

[Stepanya]

Почему выполняется onclick у кнопки при нажатии на энтер в инпуте?

фокус на инпуте, нажимаем энтер, результат: "button1" -> "form-submit"