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

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

这是working example。

Answer 2

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

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

直播DEMO。

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

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

5 个答案: