evento de disparo cuando jQuery clic fuera del elemento

Question

$(document).click(function(evt) { 
    var target = evt.currentTarget; 
    var inside = $(".menuWraper"); 
    if (target != inside) { 
     alert("bleep"); 
    } 

}); 

estoy tratando de encontrar la manera de hacerlo de modo que si un usuario hace clic fuera de un determinado div (menuWraper), se dispara un evento .. me di cuenta de que sólo puede haga que cada clic active un evento, luego verifique si elTarget actual seleccionado es el mismo que el objeto seleccionado de $ (". menuWraper"). Sin embargo, esto no funciona, currentTarget es objeto HTML (?) Y $ (". MenuWraper") es objeto Objeto? Estoy muy confundido.

Answer 1

Solo tiene su elemento menuWraper llame al event.stopPropagation() para que su evento de clic no suba al document.

Pruébelo:http://jsfiddle.net/Py7Mu/

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

$(".menuWraper").click(function(event) { 
    alert('clicked inside'); 
    event.stopPropagation(); 
}); 

• http://api.jquery.com/event.stopPropagation/

Alternativamente, usted podría return false; en lugar de utilizar event.stopPropagation();

Answer 2

La aplicación más común aquí está cerrando al hacer clic en el documento, pero no cuando se trata de dentro de ese elemento, para ello se quiere parar el burbujeo, como esto:

$(".menuWrapper").click(function(e) { 
    e.stopPropagation(); //stops click event from reaching document 
}); 
$(document).click(function() { 
    $(".menuWrapper").hide(); //click came from somewhere else 
}); 

Todo se hace aquí es la prevención el clic de bubbling up (a través de event.stopPrpagation()) cuando se trataba de un elemento .menuWrapper. Si este no sucedió, el clic provino de otro lugar, y de manera predeterminada llegará hasta document; si llega allí, ocultamos esos elementos .menuWrapper.

Answer 3

No creo documento desencadena el evento clic. Intenta usar el elemento del cuerpo para capturar el evento click. Puede ser que necesite para comprobar que ...

Answer 4

probar estos ..

$(document).click(function(evt) { 
    var target = evt.target.className; 
    var inside = $(".menuWraper"); 
    //alert($(target).html()); 
    if ($.trim(target) != '') { 
     if ($("." + target) != inside) { 
      alert("bleep"); 
     } 
    } 
}); 

Answer 5

si tiene elementos secundarios como menús desplegables

$('html').click(function(e) { 
    //if clicked element is not your element and parents aren't your div 
    if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) { 
    //do stuff 
    } 
}); 

Answer 6

Sé que la pregunta ha sido contestada, pero Espero que mi solución ayude a otras personas.

stopPropagation causaron problemas en mi caso, porque necesitaba el evento click para otra cosa. Además, no todos los elementos deberían hacer que el div se cierre al hacer clic.

Mi solución:

$(document).click(function(e) { 
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") && 
     $(e.target).closest("#div-exception").attr("id") != "div-exception") { 
     alert("Clicked outside!"); 
    } 
}); 

http://jsfiddle.net/NLDu3/

Answer 7

Este código se abrirá el menú en cuestión, y configurará un evento de clic oyente. Cuando se active, recorrerá los padres del id del objetivo hasta que encuentre el id del menú. Si no lo hace, ocultará el menú porque el usuario ha hecho clic fuera del menú. Lo probé y funciona.

function tog_alerts(){ 
    if($('#Element').css('display') == 'none'){ 
     $('#Element').show(); 
     setTimeout(function() { 
      document.body.addEventListener('click', Close_Alerts, false); 
     }, 500); 
    } 
} 

function Close_Alerts(e){ 
    var current = e.target; 
    var check = 0; 
    while (current.parentNode){ 
     current = current.parentNode 
     if(current.id == 'Element'){ 
     check = 1; 
     } 
    } 
    if(check == 0){ 
     document.body.removeEventListener('click', Close_Alerts, false); 
     $('#Element').hide();   
    } 
} 

Answer 8

prueba este

$(document).click(function(event) { 

     if(event.target.id === 'xxx') 
      return false; 
     else { 
       // do some this here 
     } 

    }); 

Answer 9

$(document).click((e) => { 
    if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) { 
    } else { 
    this.onClose(); 
    } 
}); 

Answer 10

function handler(event) { 
var target = $(event.target); 
if (!target.is("div.menuWraper")) { 
    alert("outside"); 
} 
} 
$("#myPage").click(handler);