How to disable mouseout events triggered by child elements?

In this article, we shall discuss how to avoid triggering unwanted “mouseout” events from child elements due to event bubbling. This maneuver can be achieved by listening to the following events instead of “hover”, or “mouseover” and “mouseout” events :

  1. onmouseenter: This event is triggered when the cursor/pointer moves onto an element. This event does not propagate upwards to parent elements hence it can be used in circumstances where event bubbling is eliminated.
  2. onmouseleave: This event is triggered when the cursor/pointer moves out of an element. On “mouseenter”, this event does not propagate up the document in the hierarchy.
  • JS Code: The example is implemented using Vanilla JavaScript.

    JavaScript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;
        });  
    });

    chevron_right

    
    

  • JS Code: jQuery part of the implementation.

    JavaScript



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    $('document').ready(()=>{
        $('.parent').on({
            'mouseenter': () =>{
                  
                $('.child1').text('inside');
                $('.child2').text('inside');
            },
            'mouseleave' : () => {
                $('.child1').text('outside');
                $('.child2').text('outside');
            }
        });
    });

    chevron_right

    
    

  • Final Code:

    HTML

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>
    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>

    chevron_right

    
    


    Output:

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.