enter image description here

There are two blocks, the second one is embedded in the first one and has position: absolute ;. Events are hung on both blocks, and when clicking on the second block both events are activated. What needs to be done in the trigger of the parent block, so that when you click on the child block, only its event is called.

    1 answer 1

    $(".block1").on("click", function() { alert(1); }) $(".block2").on("click", function(e) { e.stopPropagation(); alert(2); }) 
     div { display: block; } .block1 { height: 80px; width: 80px; background: #333; position: relative; } .block2 { height: 20px; width: 20px; top: 0; right: 0; background: #ccc; position: absolute; z-index: 2 } 
     <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <div class="block1"> <div class="block2"></div> </div> </body> </html>