Javascript 如果在按钮外单击，jQuery将隐藏

我想通过点击jQuery按钮来显示一个段落。但是当它可见时，我想通过单击按钮以外的任何位置（即按钮之外的任何位置）来隐藏它。 例如，以下是我的代码：

<p style="display: none">Hello  world</p>
<button>Say Hello</button>

以下是JSFIDLE链接：

---

我如何通过单击按钮外部来隐藏它？谢谢

您可以将事件处理程序绑定到整个文档上的

单击事件，并检查目标元素是否不是按钮：

$(document).click(function(e){
    if(e.target.nodeName.toLowerCase() != 'button')
        $('p').hide();
});

或者这里有一种更为“jquery”的方式：

Live。
您可以将
单击事件处理程序绑定到
文档以及按钮上的文档。在该事件处理程序中，隐藏
p
元素：

$("button").click(function (e) {
    $("p").show();
    e.stopPropagation();
});
$(document).click(function() {
    $("p").hide();  
});

您需要停止
按钮
单击事件中
单击
事件的传播，否则它将冒泡到
文档
，并且
p
元素将立即再次隐藏

以下是一个。
您可以通过将处理程序绑定到文档的
单击事件，并使用来确定用户是否单击了按钮或文档中的其他内容，从而利用事件冒泡：

$(document).click(function(event) {
    if ($(event.target).is("button")) {
        $("p").show();
    } else {
        $("p").hide();
    }
});

你好，世界

打招呼
功能表演（e）{
$（“p”）.show（）；
e、 取消气泡=真；
document.addEventListener（'click'，hide，false）；
}
函数hide（）{
$（“p”）.hide（）；
document.removeEventListener（'click'，hide，false）；
}
尽管手动操作很好，但有一个插件允许您添加此功能，它可以帮助您：

请不要使用内联js:（.这很糟糕，&uglyThis
如果（$（event.target）.is（“button”））
现在帮了我的忙。它太棒了。jQuery整体来说真的很珍贵！没有它，一个人怎么能生活…：D
$("button").click(function (e) {
    $("p").show();
    e.stopPropagation();
});
$(document).click(function() {
    $("p").hide();  
});

$(document).click(function(event) {
    if ($(event.target).is("button")) {
        $("p").show();
    } else {
        $("p").hide();
    }
});

<p style="display: none">Hello  world</p>
<button onclick='show(event);'>Say Hello</button>

function show(e){
   $("p").show();
   e.cancelBubble = true;
   document.addEventListener('click',hide,false);
}

function hide(){
   $("p").hide();
  document.removeEventListener('click',hide,false);
}