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元素會被隱藏再次直遠。

這是working example。

Answer 2

您可以在整個文檔綁定的事件處理程序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 3

您可以利用事件的處理程序綁定到click事件的文件，並使用event.target，以確定如果用戶點擊該文件中的按鈕或別的東西鼓泡：

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

Answer 4

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

Answer 5

雖然這樣做手工是偉大的，有一個插件，它允許您添加此功能的它可以幫助你：

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