javascript - jQuery - 如何仅在单击外部时隐藏 DIV 元素

标签 javascript jquery

我有一个 DIV 元素,它会在执行特定操作时出现。为了简单起见,我编写了一个非常简单的例程来模拟我遇到的问题。然而,我面临的问题是,当您在 DIV 元素内部(以及在 textarea 外部)单击时,它会隐藏 DIV无论如何。

下面是代码:

<body>
outside div
<br><br>

<a href="#" id="wrap_on">make inside appear</a>
<br><br>

<div id='wrap' style='background:red;display:none;padding:10px;width:155px'>
    <textarea id='inside'>inside div</textarea>
    <div id='inside2'>also inside div -- click me</div>
</div>
</body>

<script>
$(document).ready(function() {
    $('#wrap_on').click(function() {
        $('#wrap').show();
        $('#inside').select().focus();    
    });

    $('#inside2').click(function() {
        alert('test');
    });

    // #inside2 does not work but #wrap does hide
    $('#wrap').focusout(function() {
        $('#wrap').hide();
    });
});
</script>

或者您可以在这里修改它:http://jsfiddle.net/hQjCc/

基本上,我希望能够单击文本“also inside div -- click me”并弹出警报。但是,.focusout 函数阻止它工作。此外,如果您在其外部单击,我想隐藏 #wrap DIV

最佳答案

$(document).click(function(e) {
    var t = (e.target)
        if(t!= $("#inside").get(0) && t!=$("#inside2").get(0) && t!=$("#wrap_on").get(0) ) {
            $("#wrap").hide();
        }
});

毕竟这应该可以工作。

http://jsfiddle.net/hQjCc/4/

关于javascript - jQuery - 如何仅在单击外部时隐藏 DIV 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4912647/

相关文章:

javascript - 每 2 秒进行一次 AJAX 后调用是不是一个坏主意?

javascript - Facebook API 阻止用户搜索

javascript - 使用 javascript 从下拉列表中删除组标题

javascript - Opera mini 中的触发滚动

javascript - 单击时渲染新元素

javascript - 如何在 JavaScript 中控制 SWFObject?

javascript - 在 Ubuntu 64 位上安装 js-yaml NPM 包依赖项时出现问题

javascript - 如果函数不返回值,Jasmine 如何工作?

javascript - 如何检测输入文本中的值何时被脚本更改?

JQuery - 如何获取所有数据