Question

Pressing return on the <input> of the form in the code below seems to trigger two events:

• submit event,
• click event for the first <button> in the form.

preventDefault seems to cancel the submit event, but the click event is not stopped because it is triggered before the submit event. I could replace <button> with an <input type="button">, but why is the <button> clicked at all? How can I prevent it?

Here is the form http://jsfiddle.net/MNXUS/:

<form>
  <button></button>
  <input>
</form>

Answer 1

That’s just what browsers do. If you don’t want the button to submit the form, you can make it a “button” button instead of a “submit” button:

<button type=button>Click Me</button>