DIV 在单击其中的元素时失去焦点答案

【问题标题】：DIV losing focus when clicking on elements inside itDIV 在单击其中的元素时失去焦点
【发布时间】：2015-01-29 11:31:44
【问题描述】：

为什么当我点击其中的元素时，DIV 会失去焦点？我有一个 JS 在失去焦点时隐藏 DIV。但是，当单击 DIV 内的元素时，不应该发生这种情况。它需要使用 .on 来完成，因为正在进行一些 ajax 加载。

$(document).on('focusout', '#geomodal', function(e) {
    console.log('.focusout');
});

<div id="geomodal" tabindex="-1">
    <input value="109" name="districts[]" type="checkbox">
    <label>Bla</label>
    <br>
    <input value="152673" name="districts[]" type="checkbox">
    <label>Blabla</label>
    <br>
</div>

http://jsfiddle.net/2g41su81/2/

jQuery 文档：

focusout 事件被发送到一个元素时，它或任何元素在里面，失去焦点。

【问题讨论】：

这种行为是正确的，#geomodal 正在失去焦点，因为焦点被赋予了子元素。你想实现什么行为？
是的，但是当点击其中的元素时，div 如何保持焦点？
表单元素在点击它们时会窃取焦点。没有 tabindex 的普通子元素不会。
@Mike 你不能 - 点击另一个元素的行为会改变焦点。
我更新了问题。

标签： javascript jquery

【解决方案1】：

一次只有一个元素具有焦点 - 如果输入具有焦点，则您的 div 没有。失去焦点后，检查新获得焦点的元素是你的 div 还是子元素，在这种情况下不要隐藏它。

$(document).on('focusout', '#geomodal', function (e) {
    setTimeout(function(){
        var focus=$(document.activeElement);
        if (focus.is("#geomodal") || $('#geomodal').has(focus).length) {
            console.log("still focused");
        } else {
            console.log(".focusout");
        }
    },0);
});

setTimeout 是在进行检查之前让新元素获得焦点所必需的。

http://jsfiddle.net/2g41su81/5/

【讨论】：

那是我的朋友。 has() 选择器很棒！

【解决方案2】：

你也可以使用e.relatedTarget来获取导致focusout被触发的元素，并据此进行处理！

【讨论】：

【解决方案3】：

检查这个例子。

点击内部元素时不执行focusout事件

检查“tabindex”属性，是诀窍

HTML 代码

<div id="mydiv" tabindex="100">
    <div class="anotherdiv">
        <input type="checkbox" name="" value=1>
    </div>
    <div class="anotherdiv"> child content
        <input type="checkbox" name="" value=1>
    </div>  
</div>

http://jsfiddle.net/tierrarara/kPbfL/425/

JS 代码

$("#mydiv").focusin(function() {
    $("#mydiv").css("background","red");
});
$("#mydiv").focusout(function() {
    $("#mydiv").css("background","white");
});

CSS 代码

#mydiv{
    width : 50px;
    height:auto;
    border : 1px solid red;
}

.anotherdiv{
    width : 50px;
    height:50px;
    border : 1px solid blue;
}

【讨论】：

完美解决方案-> 当我们使用 tabindex 时它可以工作。谢谢你的技巧..

【解决方案4】：

删除 jquery 并添加这个 css 样式：

#geomodal:hover,#geomodal:focus,#geomodal:active{
outline: -webkit-focus-ring-color auto 5px;
}

检查这个小提琴：http://jsfiddle.net/2g41su81/4/

【讨论】：