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();
})

<强> Working Demo

Answer 2

您可以使用 e.stopPropagation() 来阻止点击事件在输入获得焦点时冒泡：

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

});

<强> Updated Fiddle

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

哇......哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇1}}容器!! ：）

solution fiddle

$(event.target)

并将body添加到toggle

如果不是，那么，请致电

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

});

demo without an id to input element

Answer 6

是的，有办法，请参阅下面的演示。

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

DEMO

Answer 7

或者

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

有很多这样的帖子......

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

7 个答案: