En este artículo, discutiremos cómo evitar la activación de eventos de «mouseout» no deseados de elementos secundarios debido al burbujeo de eventos. Esta maniobra se puede lograr escuchando los siguientes eventos en lugar de los eventos de «desplazamiento» o «mouseover» y «mouseout»:
- onmouseenter: este evento se activa cuando el cursor/puntero se mueve sobre un elemento. Este evento no se propaga hacia arriba a los elementos principales, por lo que se puede utilizar en circunstancias en las que se elimine el burbujeo de eventos.
- onmouseleave: este evento se activa cuando el cursor/puntero se mueve fuera de un elemento. En «mouseenter», este evento no se propaga hacia arriba en el documento de la jerarquía.
Código JS: el ejemplo se implementa utilizando Vanilla JavaScript.
JavaScript
window.addEventListener('load',()=>{ const parent = document.querySelector('.parent'); const child1 = document.querySelector('.child1'); const child2 = document.querySelector('.child2'); const enter = 'Inside'; const exit = 'Outside'; parent.addEventListener('mouseenter',()=>{ child1.innerText = enter; child2.innerText = enter; }); parent.addEventListener('mouseleave',()=>{ child1.innerText = exit; child2.innerText = exit; }); }); |
Código JS: jQuery parte de la implementación.
JavaScript
$('document').ready(()=>{ $('.parent').on({ 'mouseenter':() =>{ $('.child1').text('inside'); $('.child2').text('inside'); }, 'mouseleave' :() => { $('.child1').text('outside'); $('.child2').text('outside'); } });}); |
Código definitivo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
Disable mouseout events triggered by child elements
</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
</head>
<body>
<h2 style = "color: green;">Geeks for Geeks</h2>
<div class="parent">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
</body>
<style>
.parent{
width: 400px;
height: 400px;
border: 2px Solid black;
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: green;
}
.parent > div{
width: 150px;
height: 300px;
border: 2px solid black;
text-align: center;
line-height: 280px;
display: inline-block;
font-family:'Courier New', Courier, monospace;
font-size: larger;
font-weight: bolder;
color: black;
background-color:yellow;
}
</style>
<script type="text/javascript">
window.addEventListener('load', ()=>{
const parent = document.querySelector('.parent');
const child1 = document.querySelector('.child1');
const child2 = document.querySelector('.child2');
const enter = 'Inside';
const exit = 'Outside';
parent.addEventListener('mouseenter', ()=>{
child1.innerText = enter;
child2.innerText = enter;
});
parent.addEventListener('mouseleave', ()=>{
child1.innerText = exit;
child2.innerText = exit;
});
});
</script>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA