jQuery ocultar si se hace clic fuera del botón

Question

Quiero mostrar un párrafo haciendo clic en el botón con jQuery. Pero cuando está visible, quiero ocultarlo haciendo clic en cualquier lugar que no sea el botón (es decir, en cualquier lugar fuera del botón). Por ejemplo, aquí es mi código:

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

jQuery:

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

aquí es jsFiddle enlace: http://jsfiddle.net/k9mUL/

Como puedo ocultarlo haciendo clic fuera del botón? Gracias

Answer 1

Puede vincular un controlador de eventos click al document, así como el que está en el botón. En ese controlador de eventos, ocultar el elemento p:

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

Es necesario detener la propagación del evento click en caso button clic, de lo contrario se suben a la document y el elemento p se ocultará de nuevo recta lejos.

Aquí hay un working example.

Answer 2

Puede enlazar un controlador de eventos para el evento click en todo el documento y comprobar si el elemento seleccionado no es un botón:

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

O aquí es una forma más "jQuery":

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

En vivo DEMO.

Answer 3

Usted puede tomar ventaja de la propagación de eventos mediante la unión de su controlador a la click caso del documento y usando event.target para determinar si el usuario hace clic en el botón o algo más en el documento:

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

a pesar de que hacerlo manualmente es grande, no es un plugin que le permite añadir esta funcionalidad de la misma le ayuda a:

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