Tengo algunos elementos que puedo seleccionar con la función .click() y se resaltaron. Hay un menú encima de ellos con algunas acciones. Quiero cancelar el resaltado cuando hago clic en cualquier elemento pero no en el menú.
Estructura:
<body> <div id="menu"> </div> <div id="elements"> /* selectable elements here */ </div> </body>Ejemplo ejecutable
$().ready(function(){ $("#elements a").click(function(){ $(this).css('color', 'red'); return false; }); $(document).click(function(e) { if ( $(e.target).closest('#menu').length === 0 ) { $("#elements a").css('color', 'blue'); } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu"> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> </div> <div id="elements"> <a href="#">Element 1</a> <a href="#">Element 2</a> <a href="#">Element 3</a> </div> <div> Click any element to highlight it. Click anywhere to reset highlighting. Click menu to keep highlighting. </div> Traté de enlazar $("body *").not("#menu").click(...); pero cuando hago clic en #menu, el evento onclick del cuerpo también se dispara porque #menu son los hijos del cuerpo.
$(document).click(function(e) { if ( $(e.target).closest('#menu').length === 0 ) { // cancel highlighting } }); Una solución alternativa sería llamar a stopPropagation() al final del controlador de clics #menu y los controladores de clics de elementos. De esa manera, si un evento de clic aparece en el objeto del documento, sabrá que no se hizo clic en el menú ni en los elementos y puede cancelar el resaltado de manera segura:
$('#menu').click(function(e) { // do stuff e.stopPropagation(); }); $('.element').click(function(e) { //do stuff e.stopPropagation(); }); $(document).click(function() { // cancel highlighting });.closest se propagará y verificará si uno de los padres es el elemento no seleccionable.
$(document).on('click', '.clickable_parent', function(e){ if(e.target.closest(".UnClickable_child") === null){ //do stuff } });Una alternativa a escribir su propio controlador delegado para esto es usar el complemento de "eventos externos" de Ben Almans para lograr esto. Hace más o menos lo mismo mencionado por Šime Vidas, pero bueno, ¡las opciones son algo bueno!
http://benalman.com/projects/jquery-outside-events-plugin/
Entonces algo como esto
$('#menu').bind("clickoutside", function(){ // cancel highlighting })