Question

当我点击其中的元素时，为什么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文档：

当焦点输出事件或任何元素发送到元素时在里面，失去了焦点。

Answer 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/

Answer 2

你也可以使用e.relatedTarget来获取导致焦点的元素，并根据它进行处理！

Answer 3

查看此示例。

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

检查＆＃34; tabindex＆＃34;属性，是诀窍

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

Answer 4

删除jquery并添加此css样式：

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

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

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

4 个答案: