jQuery ukryj po kliknięciu poza przyciskiem

Question

Chcę wyświetlić akapit, klikając przycisk z jQuery. Ale gdy jest widoczny, chcę go ukryć, klikając nigdzie indziej niż przycisk (tj. Nigdzie poza przyciskiem). Na przykład, tutaj jest mój kod:

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

jQuery:

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

tutaj jest jsfiddle Link: http://jsfiddle.net/k9mUL/

Jak mogę ukryć, klikając przycisk zewnątrz? Dzięki

Answer 1

Można powiązać obsługę zdarzeń click z document, a także z tą na przycisku. W tej procedurze obsługi zdarzenia, ukryć element p:

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

musisz się zatrzymać rozprzestrzenianie zdarzenia w przypadku button click click, w przeciwnym razie będzie bańki do document i element p zostaną ukryte ponownie prosto z dala.

Oto working example.

Answer 2

Można powiązać obsługi zdarzenia do zdarzenia click na całego dokumentu i sprawdzić, czy docelowy element nie znajduje się przycisk:

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

A oto bardziej „jquery” sposób:

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

Na żywo DEMO.

Answer 3

Można wykorzystać przypadku stacjonarnego wiążąc swoją obsługi do zdarzenia click dokumentu i korzystania event.target aby określić, czy użytkownik kliknął przycisk lub coś innego w dokumencie:

$(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

Chociaż robi to ręcznie jest super, jest plugin, który pozwala na dodanie tej funkcjonalności to pomaga:

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