单击子项时如何不丢失元素焦点答案

【问题标题】：How to not lose element focus when children are clicked单击子项时如何不丢失元素焦点
【发布时间】：2014-10-28 18:40:51
【问题描述】：

在这个小提琴中有一个 div，里面有两个元素。

http://jsfiddle.net/nxujqocw/

HTML：

<div tabindex=0>
    <input type="text" value="hello"/>
    <input type="button" class="hidden" value ="hola"/>
</div>

Javascript：

$(document).ready(function() {
    $("div").focusin(function() {
        console.log("focus in");
        $("input[type=button]").removeClass("hidden");
    });
    $("div").focusout(function() {
        console.log("focus out");
        $("input[type=button]").addClass("hidden");
    });
});

我希望发生以下行为：如果我在 div（包括子项）内单击，我希望在其中出现一个按钮。

在 Chrome 中，如果我让按钮出现，然后单击它，会发生焦点丢失并重新获得的情况，这对我来说很好，即使它在技术上不正确。

但在 Firefox 中并没有重新获得焦点。

我怎样才能做到这一点？

【问题讨论】：

只有一个焦点元素。
同意，但是如何解决这个问题？
代替focusout尝试使用blur事件

标签： jquery firefox jquery-events

【解决方案1】：

问题是，当文本输入是焦点并单击按钮时，

首先，focusout 在文本输入时触发，从而隐藏按钮
那么，由于按钮被隐藏，无法获得焦点，所以focusin没有被触发。

你可以这样修复它：

在focusout 事件监听器中，不要立即隐藏元素，而是使用setTimeout。
在focusout 事件侦听器中，如果尚未运行，请清除超时。

var $target = $("input[type=button]"),
    timer;
$("div")
.focusin(function() {
    clearTimeout(timer);
    $target.removeClass("hidden");
})
.focusout(function() {
    timer = setTimeout(function() {
        $target.addClass("hidden");
    }, 0);
});

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div tabindex="0">
    <input type="text" value="hello"/>
    <input type="button" class="hidden" value="hola" />
</div>

【讨论】：