单击时淡出，除非单击输入元素

Question

当用户单击任何地方时，.container需要淡出，但是不是当用户单击输入字段时。

除非单击输入字段，否则有没有办法将其淡出？

小提琴

$('.container').click(function () {
    $(this).fadeOut();
});

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eum ad adipisci velit assumenda cupiditate molestias facere officia neque maxime voluptatum officiis libero animi sit a accusamus culpa quasi quis!</p>
    <input type="text" name="" id="" autofocus />
</div>

奖励点如果在较旧的浏览器上工作。

Answer 1

您需要将传播引入文本框。使用此：

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

工作演示

Answer 2

您可以使用 e.stoppropagation（）以防止单击事件在输入获得焦点时浮动：

$('.container input').click(function (e) {
    e.stopPropagation();
});

更新了小提琴

Answer 3

尝试此

$(".container input").click(function(event) {
    event.stopPropagation();
})

Answer 4

其他答案使用stopPropagation，但也可以与return false;

一起使用

$('.container input').click(function() {
   return false;
});
$('.container').click(function () {
  $(this).fadeOut();
});

Answer 5

是的，有一种方法，请参见下面的演示。

$('.container').click(function (e) {
  if ($(e.target).closest("input[type='text']").length === 0) {
      $(this).fadeOut();
  }
});

demo

Answer 6

哇..如此多的答案。...也尝试这个...只需使用 $(event.target)即可查找body元素上单击的内容，如果不是输入，则toggle容器！！：）

解决方案小提琴

$('body').click(function(event) {
    if($(event.target).is('#input'))
    {}
    else
    {
        $('.container').toggle(1200);
    }
});

并将id添加到<input type="text" name="" id="input" autofocus />

如果不是这样，请

if($(event.target).is('input'))      
                   /* ^^ removed # tag from here*/

演示没有ID到输入元素

Answer 7

或

$('.container').not('input').click(function () {...});

有很多这样的帖子...