En este artículo, aprenderemos cómo vincular un evento en un elemento pero no en sus elementos secundarios en jQuery. Queremos agregar un evento en el elemento principal pero no en el elemento secundario.
Planteamiento: Podemos hacer esta tarea en los siguientes pasos:
- Primero, agregamos un evento de clic en el elemento div que contiene un elemento de párrafo usando la función on() en JQuery.
- Y luego, para que el evento de clic solo funcione en el elemento principal, llamamos a una función que verifica si el elemento en el que se hizo clic es el elemento principal o no. Si es un padre, llamamos a una función de alerta(). De lo contrario, no hacemos nada.
- La función se ve así:
$('.parent').on('click', function(e) {
if (e.target == this){
alert( 'clicked on parent element' );
}
});
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<style>
body {
color: green;
font-size: 30px;
}
div {
font-size: 40px;
}
button {
font-size: 30px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div class='parent'>
click to see changes(parent)
<p style="color: red;" class="child">
This will not work(Child)
</p>
</div>
</center>
<script>
$('.parent').on('click', function (e) {
if (e.target == this) {
alert('clicked on parent element');
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<style>
body {
color: green;
font-size: 30px;
}
div {
font-size: 40px;
}
button {
font-size: 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<ul>
<li style="color: red;" class='parent'>
click to see changes(parent)
</li>
<ul>
<li class="child">This will not work(child)</li>
<ul>
<li>This will also not work (GrandChild)</li>
</ul>
</ul>
</ul>
<script>
$('.parent').on('click', function (e) {
if (e.target == this) {
alert('clicked on parent element');
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sachinchhipa44 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA