Aquí está mi código:
$(document).click(function(e){ if( $(e.target).closest("#myid").length > 0 ) { return false; } alert('clicked'); });
#myid{ border: 1px solid; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="myid"> something <br> <a target="_blank" href="#">link</a> <p>paragraph</p> </div> </div>
Como puede ver, cuando hace clic fuera del elemento div#myid
, se mostrará una alerta. Quiero que esa alerta también se muestre cuando hagas clic en el link
. ¿Cómo puedo hacer eso?
Para hacer esto, puede agregar otra condición a su if que excluya el elemento a
dentro del elemento #myid
. Prueba esto:
$(document).click(function(e) { var $target = $(e.target); if ($target.closest("#myid").length > 0 && $target.is(':not(a)')) { return false; } alert('clicked'); });
#myid { border: 1px solid; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="myid"> something <br> <a target="_blank" href="#">link</a> <p>paragraph</p> </div> </div>
He agregado otro cheque de la siguiente manera:
if( $(e.target).closest("#myid").length > 0 && $(e.target).attr("id") !=="linkID")
Agregue el atributo id a su enlace como:
<a target="_blank" id="linkID" href="#">link</a>
Por favor, vea el violín. funciona bien
$(document).click(function(e){ if( $(e.target).closest("#myid").length > 0 && $(e.target).attr("id") !=="linkID") { return false; } alert('clicked'); });
#myid{ border: 1px solid; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="myid"> something <br> <a target="_blank" id="linkID" href="#">link</a> <p>paragraph</p> </div> </div>
Debe obtener el objetivo actual en el que hizo clic. En este caso, debe distinguirse del objetivo actual (que será el ancla) antes que nada.
Puede saber en qué elemento hizo clic usando el método .is()
jQuery . Ejemplo:
$(document).click(function(e) { if($(e.target).is("a")){ alert("You clicked the anchor"); e.stopPropagation(); return; } if ($(e.target).closest("#myid").length > 0) { return false; } alert('clicked'); });
Agregué una condición antes de proceder a verificar si el elemento en el que se hizo clic es un elemento de anclaje. Mejor agregue algo para seleccionarlo de forma única, como una clase o una identificación.
Uso el método .is()
que devuelve verdadero o falso según la condición que pase para interrogar a un elemento DOM en particular. En este caso compruebo si el elemento es una etiqueta de anclaje. Tenga en cuenta que utilizo el método .stopPropagation()
para evitar que el evento se propague, esto no es necesario en este caso particular, pero es una buena práctica en tales situaciones, ya que podría terminar con un comportamiento inesperado. Por último, no olvide regresar para evitar ejecutar el código que sigue.
Si no necesita mantener el comportamiento predeterminado del ancla, es decir, no quiere navegar a la ubicación designada en el atributo href
, simplemente evite eso usando el método event.preventDefault() o devolviendo false
.
Verifique el violín aquí .