Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Propagation Example</title> <style> .container { width: 200px; height: 200px; background-color: lightblue; padding: 20px; } .box { width: 100px; height: 100px; background-color: pink; margin-top: 20px; cursor: pointer; } </style> </head> <body> <div class="container" onclick="alert('You clicked the container!');"> Click the pink box to see event propagation: <div class="box" onclick="event.stopPropagation(); alert('You clicked the box without bubbling!');"></div> </div> </body> </html>