javascript - IE点击子项不关注父项，父项有tabindex=0

Question

编辑:请参阅下面我自己的答案:https://stackoverflow.com/a/25953721/674863

演示: http://jsfiddle.net/fergal_doyle/anXM3/1/

我有一个 tabindex=0 的 div 和一个固定宽度的子 div。当我点击子 div 时，我希望外部 div 获得焦点。这适用于 Firefox 和 Chrome，并且仅在子 div 未应用宽度时适用于 Internet Explorer(7 到 10)。

有了宽度，单击子(白色)div 不会将焦点放在外层，如果外层先前有焦点，则单击子层会导致外层模糊，这对我想要的东西来说是一种痛苦做。

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")
});

Answer 1

拦截事件和使用 JS 设置焦点最终导致更多问题。

我最终发现使用像 div 或 span 这样的“普通”标签会使 IE 行为不正确。但是使用类似 var 或任何自定义标签的东西，IE 开始表现得像一个合适的浏览器。

查看更新示例: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")
});