Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable mouseout events triggered by child elements?
In this article, we will learn how to disable the mouseout events triggered by child elements with the help of the “mouseleave” event or using the stopPropagation method of the native HTML event.
The “mouseout” event, when triggered on a child element, bubbles up in its DOM hierarchy, and so it will also trigger the same event on all its parent elements. This can be unneeded when we only want to listen to the “mouseout” event on the parent element itself, not the bubbled-up event from its child elements.
Let’s understand how to avoid the above problem with the help of 2 different approaches
Approach 1
To prevent the above-unwanted behavior, we can listen to the “mouseleave” event on the parent element as the “mouseleave” event, unlike the “mouseout” event, does not bubble up and so it can be used to capture the correct events actually triggered by the parent elements and child elements separately.
Example
Let’s understand the above approach with the help of an example.
Filename: 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>
Approach 2
In this approach, we will use the stopPropagation method of mouseout events to prevent its default bubble-up behavior, thus preventing the mouseout events triggered by child elements from appearing on the parent element.
Example 1
Let’s understand the above approach with the help of an example −
Filename: 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>
Example 2
In this example, we will follow the above code pattern, and disable mouseout events using CSS pointer-events property
Filename: 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>
Example 3
In this example, we will follow the above code pattern, and disable mouseout events using JavaScript event.preventDefault() −
Filename: 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>
Conclusion
In this article, we learned how to disable mouseout events that are triggered by child elements with the help of 2 approaches. In the first approach, we used the mouseleave event as it does not bubble up, unlike the mouseout event. In the second approach, we used the stopPropragation method of the mouseout event to stop the bubbling up of the mouseout event.
379 Views
