jQuery隐藏如果点击外部按钮

Question

我想用jQuery点击按钮来显示一个段落。但当它是可见的，然后我想隐藏它通过点击任何地方，而不是按钮(即。按钮以外的任何地方)。例如，下面是我的代码:

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

jQuery:

$("button").click(function () {
    $("p").show();
});

这里是jsfiddle链接:http://jsfiddle.net/k9mUL/

如何通过点击按钮外部隐藏它?由于

Answer 1

您可以将click事件处理程序绑定到document，以及按钮上的事件处理程序。在该事件处理程序中，隐藏p元素:

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

您需要在button点击事件中停止click事件的传播，否则它将冒泡到document，并且p元素将立即再次隐藏。

Answer 2

您可以通过将处理程序绑定到文档的click事件并使用event来利用事件冒泡。目标以确定用户是否单击了该按钮或文档中的其他内容:

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

Answer 3

虽然手工操作很好，但有一个插件可以让你添加这个功能，它可以帮助你:

http://benalman.com/projects/jquery-outside-events-plugin/

Answer 4

您可以将事件处理程序绑定到整个文档的click事件，并检查目标元素是否不是按钮:

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

或者这里有一个更"jquery"的方式:

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

现场演示。

Answer 5

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