【问题标题】:Want to hide this div when click is outside, exclude any click inside it [duplicate]当点击在外面时想要隐藏这个div,排除里面的任何点击[重复]
【发布时间】:2012-11-25 07:31:22
【问题描述】:

可能重复:
Detect click outside element?

当焦点(点击)在它之外时,我试图隐藏一个 div,但是其中有一些元素,而不是对所有这些执行 e.target.id 有没有办法包含所有元素?明白我的意思了吗?

编辑:当newsletter之外的任何人click时,我试图hide#contain_name

jsfiddle:demo

<div id="newsletter">
    <form action="#" class="form-post">
        <div class="clearfix">
            <input type="text" id="email" name="email" placeholder="email" />
            <button id="fake">Send</button>
        </div>
        <div id="contain_name" class="clearfix">
            <input type="text" id="person_name" placeholder="full name" />
            <button id="real_button">Send</button>
        </div>
    </form> 
</div> 


$('#email').focus(function() {
    $('#fake').fadeOut();
    $('#contain_name').slideDown();
});

$(document).on('click', function(){
    //do something here
});

【问题讨论】:

  • 你指的是哪个DIV?
  • @FrançoisWahl 我认为这篇文章为任何试图学习这一点的人提供了一些有价值的答案,而且有点不同。
  • @Dejan.S:这是一个重复的问题,答案也几乎相同。一种是使用$(...)[0] 检查,另一种是使用$(...).length。这是相同的区别,它们都在执行相关代码段之前检查 jQuery 选择器是否匹配。任何关于 jQuery 如何工作的额外知识都会增加答案的价值,但恐怕仍然会使问题重复。
  • @FrançoisWahl 是否被标记为重复并不重要,是否有人可以从中学习。我明白你的意思。

标签: javascript jquery html


【解决方案1】:
$(document).on('click', function(e){
    if (e.target !== $("#excludedDiv")[0]) {
      // do something there
    }
});

【讨论】:

  • +1,对不起,我一开始没注意到谁先。
【解决方案2】:

这个?

$( document ).on( 'click', function ( e ) {
    if ( !$( e.target ).closest( '#newsletter' )[0] ) {
        $( '#contain_name' ).hide();
    }
});

现场演示: http://jsfiddle.net/FUDLk/11/

【讨论】:

  • @Dejan.S 您忘记定义参数e。工作演示:jsfiddle.net/FUDLk/11
  • 哦,我做到了:),请解释一下您为什么在这里使用array[0] 以及它的作用?
  • @ŠimeVidas:您当前的示例还隐藏了 fake 发送按钮。如果在外部单击,可能添加$('#fake').fadeIn(); 会将其重新设置为原始状态。
  • @Dejan.S $( e.target ).closest( '#newsletter' ) 在事件目标的祖先链中搜索#newsletter 元素。如果用户在该元素内单击,则会在祖先链中找到它,并且 jQuery 对象将选择它。否则,jQuery 对象将不包含任何元素。现在,[0] 返回 jQuery 对象的第一个元素,它要么是 #newsletter 元素,要么是 null(如果 jQuery 对象为空)。最后,! 否定该表达式,因为我们希望 if-branch 仅在 jQuery 对象不包含任何元素时执行。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-07
  • 2015-08-07
  • 1970-01-01
相关资源
最近更新 更多