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不会将焦点放在外部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或spans这样的"普通"标签会使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")
});

Answer 2

你试过添加:

$inner.click(function() {
  $div.focus();
});

并且在使用焦点后防止外部div模糊 e.stopPropagation()

更新:由于click事件在blur我使用事件后触发Mousedown,因为它之前触发blur.

PS:keydown如果你想要抓住键盘发出的模糊声,别忘了处理键盘事件.

http://jsfiddle.net/ouadie/x4nAX/