如何禁用子元素触发的 mouseout 事件?
htmlweb developmentfront end technology更新于 2024/11/12 12:28:17
在本文中，我们将学习如何借助"mouseleave"事件或使用原生 HTML 事件的 stopPropagation 方法禁用子元素触发的 mouseout 事件。
当子元素触发"mouseout"事件时，该事件会在其 DOM 层次结构中冒泡，因此它也会在其所有父元素上触发相同的事件。当我们只想监听父元素本身的"mouseout"事件，而不监听其子元素的冒泡事件时，这种方法可能没有必要。
让我们通过两种不同的方法来了解如何避免上述问题
方法 1
为了避免上述不良行为，我们可以监听父元素的"mouseleave"事件，因为"mouseleave"事件与"mouseout"事件不同，不会冒泡，因此可以分别捕获由父元素和子元素实际触发的正确事件。
示例
让我们通过一个示例来理解上述方法。
文件名:index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseout', () => {
console.log('mouseout on child element');
});
parentElement.addEventListener('mouseleave', () => {
console.log('mouseleave on parent element');
});
</script>
</body>
</html>
方法 2
在此方法中，我们将使用 mouseout 事件的 stopPropagation 方法来阻止其默认的向上冒泡行为，从而防止子元素触发的 mouseout 事件出现在父元素上。
示例 1
让我们通过一个示例来理解上述方法 -
文件名:index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseout', (event) => {
event.stopPropagation();
console.log('mouseout on child element');
});
parentElement.addEventListener('mouseout', () => {
console.log('mouseout on parent element');
});
</script>
</body>
</html>
示例 2
在此示例中，我们将遵循上述代码模式，并使用 CSS pointer-events 属性禁用 mouseout 事件
文件名:index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
<style>
.disable-mouseout {
pointer-events: none;
}
</style>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseover', () => {
parentElement.classList.add('disable-mouseout');
});
childElement.addEventListener('mouseout', () => {
parentElement.classList.remove('disable-mouseout');
});
parentElement.addEventListener('mouseout', () => {
console.log('mouseout on parent element');
});
</script>
</body>
</html>
示例 3
在此示例中，我们将遵循上述代码模式，并使用 JavaScript event.preventDefault() 禁用 mouseout 事件 -
文件名:index.html
<html lang="en">
<head>
<title>How to disable mouseout events triggered by child elements?</title>
</head>
<body>
<h3>How to disable mouseout events triggered by child elements?</h3>
<div id="parent" style="width: 300px; height: 300px; background-color: #ccc;">
<div id="child" style="width: 100px; height: 100px; background-color: #999;"></div>
</div>
<script>
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
childElement.addEventListener('mouseout', (event) => {
event.preventDefault();
console.log('mouseout on child element');
});
parentElement.addEventListener('mouseout', () => {
console.log('mouseout on parent element');
});
</script>
</body>
</html>
结论
在本文中，我们学习了如何通过两种方法禁用由子元素触发的 mouseout 事件。在第一种方法中，我们使用了 mouseleave 事件，因为它不像 mouseout 事件那样向上冒泡。在第二种方法中，我们使用了 mouseout 事件的 stopPropragation 方法来阻止 mouseout 事件的向上冒泡。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
