JavaScript 事件委託：父容器點擊事件穿透子元素

問題本質

為父容器綁定點擊事件，子元素不會「擋住」事件，而是觸發事件冒泡至父容器。需在父容器處理器中判斷實際點擊目標。

解決方案：事件對象 target 屬性

<div id="parent">
    父容器
    <div id="child1">子元素 1</div>
    <div id="child2">子元素 2</div>
</div>

<script src="jquery.min.js"></script>
<script>
$('#parent').click(function(e) {
    console.log('點擊目標:', e.target.id);
    if (e.target.id !== 'parent') {
        console.log('點擊了子元素:', e.target.id);
        // 根據 e.target 進行差異化處理
    }
});
</script>

原生 JS 寫法

document.getElementById('parent').addEventListener('click', function(e) {
    if (e.target !== this) {
        console.log('子元素被點擊:', e.target.id);
    }
});

進階：阻止冒泡

若子元素有獨立處理邏輯且不想觸發父容器，可在子元素調用 e.stopPropagation()。

最佳實踐

• 優先使用事件委託（父容器綁定），減少事件監聽器數量，支持動態子元素。
• 利用 e.target 或 e.target.closest(selector) 精準識別觸發元素。

理解事件流（捕獲→目標→冒泡）是前端事件處理的核心功力。