html - 捕获 div focusout

Question

我有一个主 div(父)和一个输入(子)和另外 2 个子 div(可点击)。

我想捕获主 div 的聚焦事件 - 而不是在单击或聚焦输入或其他 2 个可单击的 div 时。我已经使用 jQuery 设置了一个事件处理程序来捕获所有元素上的 focusin focusout 事件。

当我点击输入时我看到的是:

1. 第一个输入是焦点
2. 然后是主分区。

如果我点击任何其他可点击的 div

1. 事件首先触发 focusout 输入
2. 然后主 div 和其他 div 获得焦点，主 div 获得 focusin。

我不希望主 div 在点击其他可点击的 div 时失去焦点。

我怎样才能做到这一点？我想在失去焦点时验证输入，但在单击其他 div 时不验证。

到目前为止，这是我所拥有的:Fiddle

HTML :

<div id="main">
    <input id="i" type="text" />
    <div id="Div2" class="icons" style="background-color:blue; right: 25px;" onclick="log('Clear Clicked');"></div>
    <div id="Div1" class="icons" style="background-color:red;" onclick="log('DD Clicked');"></div>
</div>

CSS:

* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
#main {
    top: 50px;
    left: 200px;
    position: absolute;
    border: 1px solid #00bfff;
    width: 250px;
    height: 27px;
}
input {
    border: none;
    width: 248px;
    height: 25px;
    position: absolute;
    z-index: 200;
}
.icons {
    text-align:center;
    border:1px solid blue;
    height: 23px;
    width: 23px;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 99999999999999999999999;
    background-position: center;
    background-repeat: no-repeat;
}

jQuery :

$("#main").focusin(function () {
    log("Main div got focused");
});

$("#i").focusin(function () {
    log("input got focused");
});

$("#Div2").focusin(function () {
    log("dropdown div got focused");
});

$("#Div1").focusin(function () {
    log("clear div got focused");
});

$("#main").focusout(function () {
    log("Main div lost focused");
});

$("#i").focusout(function () {
    log("input lost focused");
});

$("#Div2").focusout(function () {
    log("dropdown div lost focused");
});

$("#Div1").focusout(function () {
    log("clear div lost focused");
});

function log(msg) {
    //window.console.log(msg);
    $("body").append("<p>" + msg + "</p>");
}

感谢任何帮助或指导

Answer 1

这是一个最好的解决方法，因为我也有同样的问题^_^

有一个事件的属性:“relatedTarget”

relatedTarget 将提供此事件的下一个元素

因此，如果下一个元素不是您的盒子或盒子内的任何东西，则触发焦点。

但首先你必须让你的<div>元素可聚焦，你必须像这样在 div 上添加 tabindex='-1'

<div id="main" tabindex='-1'>

脚本很短:

        $("#main, #main *").blur(function(e){
            if(!$(e.relatedTarget).is("#main, #main *")){
                //focus out.
            }
        });

焦点会丢失并进入#main，但是当焦点从#main 区域丢失时，您可以做任何事情。

这与您的要求有点不同，但我想这可能是您想要的。 如果是这样，代码将非常干净。