Skip to content
Related Articles

Related Articles

Improve Article

How to disable mouseout events triggered by child elements?

  • Last Updated : 16 Jul, 2020

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.

    Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

    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;
        });  
    });
  • JS Code: jQuery part of the implementation.



    JavaScript




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

    Final Code:

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


    Output:




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :