在本文中，我们将讨论如何避免由于事件冒泡而从子元素触发不需要的“鼠标移出”事件。可以通过侦听以下事件而不是“悬停”或“鼠标悬停”和“鼠标移出”事件来实现此操作：
- onmouseenter：当光标/指针移动到元素上时触发此事件。此事件不会向上传播到父元素，因此它可以用于消除事件冒泡的情况。
- onmouseleave：当光标/指针移出元素时触发此事件。在“mouseenter”上，此事件不会在层次结构中向上传播文档。
JS 代码：该示例是使用 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;
});
});JavaScript
$('document').ready(()=>{
$('.parent').on({
'mouseenter': () =>{
$('.child1').text('inside');
$('.child2').text('inside');
},
'mouseleave' : () => {
$('.child1').text('outside');
$('.child2').text('outside');
}
});
});HTML
Disable mouseout events triggered by child elements
Geeks for Geeks
Child 1
Child 2
JS代码： jQuery部分实现。
JavaScript
$('document').ready(()=>{
$('.parent').on({
'mouseenter': () =>{
$('.child1').text('inside');
$('.child2').text('inside');
},
'mouseleave' : () => {
$('.child1').text('outside');
$('.child2').text('outside');
}
});
});
最终代码：
HTML
Disable mouseout events triggered by child elements
Geeks for Geeks
Child 1
Child 2
输出： 