如何在事件传播过程中选择性地取消特定事件的执行？

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

<style>
    #A, #B, #C {
        padding: 20px;
        border: 1px solid black;
        margin: 10px;
    }
    #A { background-color: lightblue; }
    #B { background-color: lightgreen; }
    #C { background-color: lightcoral; }
</style>
<div id="A">
    A
    <div id="B">
        B
        <div id="C">C</div>
    </div>
</div>

<script>
    // 使用事件代理处理 A 和 C 元素的点击事件
    document.getElementById('A').addEventListener('click', function(event) {
        if (event.target.id === 'A') {
            console.log('A 元素被点击');
        } else if (event.target.id === 'C') {
            console.log('C 元素被点击');
        }
    }, false); // 使用捕获阶段，也可使用冒泡阶段

    // B 元素的自定义监听器，阻止事件进一步传播
    document.getElementById('B').addEventListener('click', function(event) {
        event.stopImmediatePropagation(); // 阻止后续监听器执行
        console.log('B 元素自定义监听器触发');
    }, false); // 使用捕获阶段，也可使用冒泡阶段
</script>