阅读量:0
在JavaScript中，要阻止事件冒泡，您需要在事件处理程序中使用event.stopPropagation()方法。这将阻止事件触发其父元素或祖先元素上的事件处理程序。以下是一个示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Bubbling Example</title> <style> div { border: 1px solid black; padding: 20px; margin-bottom: 10px; } </style> </head> <body> <div id="parent"> Parent <div id="child"> Child </div> </div> <script> // 获取父元素和子元素 const parent = document.getElementById('parent'); const child = document.getElementById('child'); // 为父元素添加点击事件处理程序 parent.addEventListener('click', (event) => { alert('Parent clicked'); }); // 为子元素添加点击事件处理程序 child.addEventListener('click', (event) => { // 阻止事件冒泡到父元素 event.stopPropagation(); alert('Child clicked'); }); </script> </body> </html> 在这个示例中，当您点击子元素时，只会弹出"Child clicked"消息，而不会弹出"Parent clicked"消息，因为我们在子元素的事件处理程序中调用了event.stopPropagation()方法来阻止事件冒泡。
