Hacer clic en jquery

Question

¿Cuál es la forma más fácil de hacer un clic en jquery? Donde se oculta un cuadro de div en cualquier lugar fuera de él.

Answer 1

No me gustan las soluciones que utilizan stopPropagation porque a menudo estoy usando la propagación de eventos para gestionar varios enlaces. No quiero tener que preocuparme de que dejen de funcionar si existe la caja. Mi elección sería algo como esto:

var $box = $('#box'); 
$(document.body).click(function(){ 
    if (!$box.has(this).length) { // if the click was not within $box 
     $box.hide(); 
    } 
}); 

La función has filtra la selección y vuelve elementos sólo si contienen el elemento pasado como parámetro (también se puede utilizar una cadena de selección, pero eso no es relevante aquí) Si el clic fuera del cuadro, length será 0, por lo tanto, el condicional pasará y el cuadro estará oculto.

Esto se debe optimizar estableciendo un valor booleano para si el cuadro está actualmente visible y solo haciendo la llamada has si está actualmente visible.

Answer 2

$('body').click(function() { 
    $('#box').fadeOut(); 
}); 

$('#box').click(function(e) { 
    e.stopPropagation(); 
}); 

Esto funciona porque #box recibirá el evento click primero si hace clic adentro. Como la propagación se detiene, el controlador adjunto al cuerpo no lo recibirá, por lo que no se cerrará a menos que haga clic fuera de la caja.

Si usted quiere que ocultar de inmediato, utilice .hide()

Tengo el stopPropagation() engañar a partir How do I detect a click outside an element?

Answer 3

Sé que jQuery tiene el evento "focusout" de elementos de formulario, no está seguro si pudiera tal vez ser utilizado para una

Answer 4

así:

$("#thediv").show(0, function() { 
    var that = $(this); 
    $(document).bind("click", function(e) { 
     if($(e.target).attr("id") != that.attr("id")) { 
      that.hide(); 
      $(this).unbind("click"); 
     } 
    }); 
}); 

violín aquí: http://jsfiddle.net/XYbmE/3/

Answer 5

unen a una función de clic al propio documento:

$(document).click(function(){ 
    alert('doc'); 
}); 

A continuación, se unen una función para el mismo evento en el propio div y volver falsa por lo que el evento será no brotan al documento .

$('#mydiv').click(function(e){ 
    alert('mydiv click'); 
    return false; 
} 

Answer 6

Aquí está mi solución

var ClickOut = {}; 

    ClickOut.list = []; 

    ClickOut.Add = function(jqel, callback) { 
     var i = ClickOut.list.push({jqel:jqel, callback:callback}); 
     return (i-1); 
    } 

    ClickOut.Remove = function(i) { 
     ClickOut.list.splice(i, 1); 
    } 

    ClickOut.Init = function() { 
     $('body').click(function(e) { 
      for(var x = 0; x < ClickOut.list.length; x++) { 
       if (!ClickOut.list[x].jqel.has(e.target).length) { 
        ClickOut.list[x].callback(); 
       } 
      } 
     }); 
    } 

Answer 7

recomiendo utilizar este lib https://github.com/gsantiago/jquery-clickout. ¡Es impresionante!

$('button').on('clickout', function (e) { 
    console.log('click outside button') 
})