javascript cancelbubble

// 示例代码：使用 cancelBubble 阻止事件冒泡

// HTML 结构
/*
<div id="outer">
    Outer Div
    <div id="inner">
        Inner Div
    </div>
</div>
*/

// JavaScript 代码
document.getElementById('inner').onclick = function(event) {
    alert('Inner Div clicked');
    // 阻止事件冒泡到外层元素
    event.cancelBubble = true; // IE 浏览器
    if (event.stopPropagation) {
        event.stopPropagation(); // 标准浏览器
    }
};

document.getElementById('outer').onclick = function() {
    alert('Outer Div clicked');
};

解释说明：

1. HTML 结构：我们有两个嵌套的 div 元素，分别是 outer 和 inner。
2. JavaScript 代码：
   • 当点击 inner 元素时，会触发一个点击事件，并弹出提示框显示 "Inner Div clicked"。
   • 使用 event.cancelBubble = true 来阻止事件冒泡到外层元素（IE 浏览器）。
   • 使用 event.stopPropagation() 来阻止事件冒泡到外层元素（标准浏览器）。
   • 如果不阻止事件冒泡，点击 inner 元素后，事件会继续传播到 outer 元素，导致两个提示框依次弹出。