Hey. There is the following structure:

<div class="parent"> <div class="child"> </div> </div>

The element with the class .parent absolutely .parent . An element with a .child class is .child relatively. I hung the click event on $('window') and checked what the target is ( e.target ). So, when I click on the parent element, the console displays that I clicked on the child element .child . Why it happens?

    4 answers 4

    Try a e.target place, output this , or e.currentTarget !

      Whom you click on - that is the target.

       $(window).click(e=> console.log(e.target)); 
       .parent{ position: absolute; background: green; width: 100px; height:100px; } .child{ background: blue; margin-left: 50px; width: 100px; height:100px; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child"> </div> </div>

        But the answer to the question contained in the body: why is this happening?

        All this mayhem is called event bubbling and event capturing , read Article

          Most likely the point is surfacing . Use event.stopImmediatePropagation();

           $('window').on('click', function(event){ event.stopImmediatePropagation(); console.log(event.target); });