Un elemento se puede ocultar o mostrar en función de si se hace clic con el mouse fuera del elemento mediante dos métodos.
Método 1: Usando el método más cercano:
- Un evento mouseup se verifica primero en el documento
$(document).mouseup(function(e) {// rest code here} - El método más cercano() se llama en el clic de destino. Este método devuelve el primer ancestro del elemento seleccionado en el árbol DOM. Luego, la propiedad de longitud se usa en el resultado para averiguar el número de antepasados. Si no hay ancestros, significa que el clic fue fuera del elemento.
if($(e.target).closest(".container").length === 0) {// rest code here} - El elemento se oculta usando el método hide().
$(".container").hide();
Ejemplo:
<!DOCTYPE html><html> <head> <title> How to hide a div when the user clicks outside of it using jQuery? </title> <style> .container { height: 200px; width: 200px; background-color: green; border: 5px solid black; } </style> <script src= </script></head> <body> <h1 style="color: green"> GeeksForGeeks </h1> <b> How to hide a div when the user clicks outside of it using jQuery? </b> <p>Click outside the green div to hide it</p> <div class="container" style="color:green"></div> <script type="text/javascript"> $(document).mouseup(function (e) { if ($(e.target).closest(".container").length === 0) { $(".container").hide(); } }); </script></body> </html> |
Producción:
- Al hacer clic dentro del div:
- Haciendo clic fuera del div:
Método 2: Comprobar si el elemento contiene el destino del clic:
- Un evento mouseup se verifica primero en el documento
$(document).mouseup(function(e) {// rest code here} - El elemento se verifica para 2 cosas, que el clic no aterriza en el elemento al pasar el método is() y el método has() con el destino del clic.
El método is() compara el elemento actual con el elemento especificado. El destino del clic se pasa como un parámetro y se niega todo el resultado para verificar esencialmente si el clic estaba fuera del elemento.
El método has() se usa para devolver todos los elementos que coinciden con al menos uno de los elementos pasados a este método. Luego, la propiedad de longitud se usa en el resultado para verificar si se devuelve algún elemento. Si no hay elementos devueltos, significa que el clic estaba fuera del elemento.
if(!container.is(e.target) && container.has(e.target).length === 0) {// rest code here} - El elemento se oculta usando el método hide().
$(".container").hide();
Ejemplo:
<!DOCTYPE html><html> <head> <title> How to hide a div when the user clicks outside of it using jQuery? </title> <style> .container { height: 200px; width: 200px; background-color: green; border: 5px solid black; } </style> <script src= </script></head> <body> <h1 style="color: green"> GeeksForGeeks </h1> <b> How to hide a div when the user clicks outside of it using jQuery? </b> <p>Click outside the green div to hide it</p> <div class="container" style="color:green"></div> <script type="text/javascript"> $(document).mouseup(function (e) { var container = $(".container"); if(!container.is(e.target) && container.has(e.target).length === 0) { container.hide(); } }); </script></body> </html> |
Producción:
- Al hacer clic dentro del div:
- Haciendo clic fuera del div:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA