如何有效地阻止事件冒泡，需要具体代码示例
事件冒泡是指当一个元素上的事件触发时，父级元素也会收到相同的事件触发，这种事件传递机制有时会给网页开发带来麻烦，因此我们需要学习如何有效地阻止事件冒泡。
在JavaScript中，我们可以通过使用事件对象的stopPropagation()方法来阻止事件冒泡。该方法可以在事件处理函数中调用，以停止事件继续传播到父级元素。下面是一些常见的场景和相应的代码示例来演示如何使用stopPropagation()方法来阻止事件冒泡。
场景一：点击按钮时阻止父元素的点击事件
<!DOCTYPE html>
<html>
<head>
<title>阻止事件冒泡</title>
<style>
/* 简单的样式用于演示 */
.box {
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div class="box" onclick="alert(\'点击了盒子！\')">
<button onclick="event.stopPropagation(); alert(\'点击了按钮！\')">点击我</button>
</div>
</body>
</html>
腾讯云 12-20 广告
