Una página web que contiene muchos elementos y la tarea es hacer clic en cualquier parte de la página excepto en un elemento usando jQuery. Hay dos métodos para resolver este problema que se discuten a continuación:
Enfoque 1:
- Este enfoque llama a una función cuando ocurre un evento de clic.
- Primero verifique la identificación del elemento objetivo y devuelva la función si coincide.
- De lo contrario, realice alguna operación para que sepa que se ha hecho clic en algún lugar.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to click anywhere of page
except one element using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
body {
height: auto;
}
#t {
height: 100px;
width: 350px;
background: green;
color: white;
text-align:justify;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<textarea id = "t">
jQuery is an open source JavaScript library
that simplifies the interactions between an
HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript.
Elaborating the terms, jQuery simplifies
HTML document traversing and manipulation,
browser event handling, DOM animations,
Ajax interactions, and cross-browser
JavaScript development.
</textarea>
<br>
<button onclick = "gfg_Run()">
click here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click anywhere on the body "
+ "except textarea to see effect.";
$('body').click(function(evnt) {
if(evnt.target.id == "t")
return;
if($(evnt.target).closest('t').length)
return;
el_down.innerHTML = "Clicked on the "
+ "body except textarea.";
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el elemento:
Enfoque 2:
- Este enfoque llama a una función cuando ocurre cualquier evento de clic.
- Si es otro elemento HTML, no haga nada.
- De lo contrario, use el método event.stopPropagation() para evitar que ocurra el evento.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to click anywhere of page
except one element using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
body {
height: auto;
}
#t {
height: 100px;
width: 350px;
background: green;
color: white;
text-align:justify;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<textarea id = "t">
jQuery is an open source JavaScript library
that simplifies the interactions between an
HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript.
Elaborating the terms, jQuery simplifies
HTML document traversing and manipulation,
browser event handling, DOM animations,
Ajax interactions, and cross-browser
JavaScript development.
</textarea>
<br>
<button onclick = "gfg_Run()">
click here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click anywhere on the body"
+ " except textarea to see effect.";
$('html').click(function() {
el_down.innerHTML = "Clicked on the body"
+ " except textarea.";
});
$('#t').click(function(event) {
event.stopPropagation();
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el elemento:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA