Question

我有一个按钮翻转时出现的搜索输入框。我没有自己的关闭按钮，而是希望能够点击页面上的任意位置来重新隐藏搜索。

如果我将单击处理程序附加到文档，这可以正常工作，但问题是搜索本身是文档的一部分。因此，如果您单击输入（当然您需要执行此操作以便键入搜索），搜索将失败。

我原本希望能够像这样编写一个函数......

$(document).not("#search").click(function(){ 
 $('#search_holder').fadeOut('fast'); 
});

即从搜索中将点击处理程序应用于整个文档APART。不幸的是，这不起作用。

那么答案是什么？

提前感谢你

Answer 1

你可以通过阻止click事件冒泡来实现，如下所示：

$(document).click(function() { 
  $('#search_holder').fadeOut('fast'); 
});
$("#search").click(function(e) {
  e.stopPropagation();
});

event.stopPropagation()阻止气泡向上移动，一直到document触发.fadeOut()，到处其他（默认情况下）将冒泡到document，导致淡入淡出。

Answer 2

取消点击事件来自您关注的按钮时传播：

$("#search").click(function(event){ 
    event.stopPropagation();
});

Answer 3

Try this Its working perfect for me.

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

    if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
        && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
    {
        searchcontainer.hide();
    }
});

jQuery - 点击（几乎！）任何地方隐藏div

3 个答案: