javascriptinternet-exploreronclickevent-capturing

The weird event capturing in IE


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


Solution

  • 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/