The weird event capturing in IE

Question

I just test same code on IE10 and Chrome Browser.

jsfilddle link

<div id='a'><input onclick="console.log('a');"/></div>
<div id='b'><button onclick="alert('b');"/></div>`

I put two different tags which are input and button in two different div tags. both elements(input, button) have onclick attribute.

what I do is simple

1. put a cursor in input tag
2. press enter key

I tried this on IE10 and Chrome.

In chrome browser the event handler attached on button has not executed. but in IE event handler attached on button has executed.

can anyone tell me why this disaster happens

Answer 1

This behaviour is related to implicit form submission which is correctly implemented by Chrome as per HTML5 spec. You can go through the spec here.

In short 'hitting the enter key' while a text field is focussed invokes browser controlled implicit form submission which in turn looks for first submit button under the 'form' element and invoke the attached handler.
In your case the 'button' element is defaulted to 'submit' type but since it is not a decendent of 'form' element hence it will not be invoked.
You can assume that current IE behaviour is not as per spec.

Answer 2

IE is handling like a brain damaged boy the "enter" key press. Pressing Enter in textbox/input/etc in IE will click the completely unrelated button near it. Is the only browser with this approach.

It's related with the IE's algorithm for selecting submit buttons. Your button is considered one, even when no form tag is present.

<button onclick="alert('b');"/> has default type = "submit"

You can change that by changing the type with the button one.

<button type="button" onclick="alert('b');"/> 

Working fiddle : http://jsfiddle.net/k1bkcx43/