为什么click事件只在一个元素上起作用？

document.getElementById('myElement').addEventListener('click', function() {
    console.log('Element clicked!');
});

document.getElementById('parentElement').addEventListener('click', function(event) {
    event.stopPropagation(); // 阻止事件冒泡
});

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000; // 确保覆盖在其他元素之上
}

#myElement {
    pointer-events: none; /* 禁用点击事件 */
}

try {
    document.getElementById('myElement').addEventListener('click', function() {
        console.log('Element clicked!');
    });
} catch (error) {
    console.error('Error:', error);
}