单击子不聚焦父母，父母有tabindex=0

Question

编辑:下面是我自己的答案：https://stackoverflow.com/a/25953721/674863

演示：doyle/anXM3/1/

我有一个带有tabindex=0的div，还有一个固定宽度的子div。当我点击子div时，我期望外部div得到焦点。这在Firefox和Chrome中很好，只有当子div没有宽度应用时，才适用于(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;
}

联署材料：

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就会开始表现得像一个合适的浏览器。

请参阅更新的示例：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;
}

联署材料：

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/

Answer 3

在IE中单击带有tabindex=0的元素将导致元素获得不可见的焦点。获得可见焦点的方法是以编程方式调用focus()，而元素还没有不可见的焦点。因为焦点就发生在鼠标关闭后，这意味着我们需要：

$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
}).focus(function(e){
    console.log('focused')
}).blur(function(e){
    console.log('blurred')
})

如果子块是内联的或没有宽度设置的块，则效果与直接单击父节点相同。但是，如果子块是内联块或具有宽度集的块，并且父块已经具有焦点，那么在执行mousedown处理程序之后父程序就会模糊()。我们有三种不同的方式，有不同的取舍。

一种选择是仅用preventDefault()来抑制模糊；这种方法的优点是，blur()永远不会触发，focus()不会冗馀触发，这允许我们在焦点和模糊处理程序中编写直接的逻辑；这种方法的缺点是它禁用了文本选择：

$('#child').mousedown(function(e){
    e.preventDefault()
})
$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
}).focus(function(e){
    console.log('focused')
}).blur(function(e){
    console.log('blurred')
})

如果我们不想禁用文本选择，另一种选择是从子程序的mouseup处理程序中将焦点集中在父节点上；但是，这样，父程序就会模糊，然后再次聚焦，这会阻止我们知道焦点或模糊是“真实的”，而不仅仅是焦点传播逻辑的短暂结果：

$('#child').mouseup(function(e){
    $(e.currentTarget).closest('[tabindex]').focus()
})
$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
}).focus(function(e){
    console.log('focused')
}).blur(function(e){
    console.log('blurred')
})

第三种选择具有上述两种方法的优点，但在逻辑上是最复杂的：

$('#parent').mousedown(function(e){
    var parent = $(e.currentTarget)
    var parentWasClicked = parent.is(e.target)
    var parentHasFocus = parent.is(':focus')
    if (parentWasClicked && !parentHasFocus) {
        parent.focus()
    } else if (parentHasFocus && !parentWasClicked) {
        window.ignoreFocusChanges = true
    }
})
.mouseup(function(e){
    var parent = $(e.currentTarget)
    if (!parent.is(':focus')) {
        parent.focus()
    }
})
.blur(function(e){
    if (window.ignoreFocusChanges) {
        return
    }
    console.log('blurred')
})
.focus(function(e){
    if (window.ignoreFocusChanges) {
        window.ignoreFocusChanges = false
        return
    }
    console.log('focused')
})