阻止事件冒泡的几种方法
如下代码，双击图片区域时，也会触发 alert(0) 事件，要阻止双击图片的冒泡
<body>
<img src="a.JPG" width="50%">
<script>
document.addEventListener('dblclick', function(e) {
e.preventDefault(); // 阻止默认行为
alert(0);
});
</script>
</body>方法1：阻止图片的默认双击行为
<body>
<img src="a.JPG" width="50%" ondblclick="event.preventDefault();">
<script>
document.addEventListener('dblclick', function(){
alert(0);
});
</script>
</body>方法2：直接在图片上添加事件监听器（推荐）
<body>
<img src="a.JPG" width="50%" id="myImage">
<script>
document.getElementById('myImage').addEventListener('dblclick', function(event){
event.preventDefault(); // 阻止默认行为
alert(0);
}, false);
</script>
</body>方法3：使用事件捕获阶段
<body>
<img src="a.JPG" width="50%">
<script>
document.addEventListener('dblclick', function(){
alert(0);
}, true); // 使用捕获阶段而非冒泡阶段
</script>
</body>方法4：完全阻止图片的所有默认行为
<body>
<img src="a.JPG" width="50%" style="pointer-events: none;">
<script>
document.addEventListener('dblclick', function(){
alert(0);
});
</script>
</body>方法5：使用更具体的事件处理（推荐）
<body>
<img src="a.JPG" width="50%">
<script>
// 捕获图片的双击事件
document.querySelector('img').addEventListener('dblclick', function(e){
e.stopPropagation(); // 阻止冒泡到document
alert('双击了图片！');
});
// 其他地方的双击事件
document.addEventListener('dblclick', function(e){
if(e.target.tagName !== 'IMG') {
alert('双击了非图片区域！');
}
});
</script>
</body>
