在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()方法來阻止事件冒泡。
