javascript - IE click on child does not focus parent, parent has tabindex=0 -

edit: see own answer below: https://stackoverflow.com/a/25953721/674863

demo: http://jsfiddle.net/fergal_doyle/anxm3/1/

i have div tabindex=0, , child div fixed width. when click on child div expect outer div recieve focus. works fine firefox , chrome, , works internet explorer (7 10) when child div has no width applied.

with width, clicking child (white) div not give focus outer one, , if outer 1 had focus, clicking child causes outer blur, pain want do.

html:

<div tabindex="0" id="test">     <div>click</div> </div>  

css:

div {     border:1px solid #000;     padding:20px;     background-color:red; } div div {     padding:8px;     background-color:#fff;     cursor:default;     width:200px; } 

js:

var $div = $("#test"),     $inner = $("#test > div");  $div.on("blur", function (e) {     console.log("blur"); })     .on("focus", function (e) {     console.log("focus") }); 

intercepting events , using js set focus ended causing more problems.

i figured out using "normal" tags divs or spans makes ie behave incorrectly. use var or custom tag , ie starts behave proper browser.

see updated example: http://jsfiddle.net/fergal_doyle/anxm3/16/

html:

<div tabindex="0" id="test">      <var class="iesux">works</var>      <foo class="iesux">works</foo>      <div class="iesux">doesn't work in ie</div>      <span class="iesux">doesn't work in ie</span> </div> 

css:

div {      border:1px solid #000;      padding:20px;      background-color:red; } .iesux {      border:1px solid #000;      display:block;      padding:8px;      background-color:#fff;      cursor:default;      width:200px; } 

js:

document.createelement("foo");  var $div = $("#test");  $div.on("blur", function (e) {      console.log("blur"); })      .on("focus", function (e) {      console.log("focus") });