IE点击子项不会聚焦父项，父项的tabindex = 0

问题描述

编辑：
请参阅我自己的答案如下：

演示：

我有一个div，tabindex = 0，和一个固定宽度的子div。当我点击子div，我期望外div接收焦点。这适用于Firefox和Chrome，并且仅适用于Internet Explorer（7到10），当子div没有应用宽度。

I have a div with tabindex=0, and a child div with a fixed width. When I click on the child div I expect the outer div to recieve focus. This works fine with Firefox and Chrome, and only works with Internet Explorer (7 to 10) when the child div has no width applied.

使用宽度，单击子（div）div不会将焦点放在外面的一个，如果外面的一个以前有焦点， 。

With a width, clicking the child (white) div does not give focus to the outer one, and if the outer one previously had focus, clicking the child causes the outer to blur, which is a pain for what I want to 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")
});

推荐答案

拦截事件并使用JS设置焦点更多的问题。

Intercepting events and using JS to set focus ended up causing more problems.

我最终发现使用正常标签，如div或跨度使IE行为不正确。但是使用 var 或任何自定义标签，并且IE开始表现得像一个正确的浏览器。

I eventually figured out that using "normal" tags like divs or spans makes IE behave incorrectly. But use something like var or any custom tag and IE starts to behave like a proper browser.

：

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

这篇关于IE点击子项不会聚焦父项，父项的tabindex = 0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！