Question

请参阅此http://jsfiddle.net/shrikanth/V7uc7/

我的要求是，每当用户离开div＃aaa时，系统应隐藏正在发生的相同div元素。

但是我遇到了以下问题。

当用户在文本框之间切换时，也会触发隐藏事件。如何修复此问题。

基本上用户走出div元素，系统应该隐藏div元素。也应该允许用户在div元素中的文本框之间切换

<div id="aaa">
    <input type="textbox" name="a"/>
    <input type="textbox" name="b"/>
    <input type="textbox" name="c"/>
</div>

Jquery

$(document).ready(
    function(){
        $("#aaa").focusout(function () {
            $(this).hide();
    });
});

CSS

#aaa{
    background-color:black;
    position:absolute;
    width:172px;
    height:133px;
    padding:32px;
}

Answer 1

您可以使用 e.stopPropagation() 来阻止focusout事件从输入到父div的冒泡，这将导致隐藏您的父div：

$("#aaa input").focusout(function (e) {
    e.stopPropagation();
});

<强> Updated Fiddle

根据您的评论，您可以使用：

$(document).click(function (e) {
    if(!$(e.target).is('#aaa')) {
        $('#aaa').hide();
    }
});

$("#aaa input").click(function (e) {
    e.stopPropagation();
});

<强> Updated Fiddle

Answer 2

尝试

$(document).ready(function () {
    var timer;
    $("#aaa input").blur(function () {
        timer = setTimeout(function () {
            $("#aaa").hide()
        }, 50);
    }).focus(function(){
        clearTimeout(timer)
    });
});

演示：Fiddle

在Jquery失去了焦点事件

2 个答案: