HTML

元素 onclick 無效：原生不支持、事件委托與替代方案

現象

<ul onclick="..."> 點擊無反應。

原因

• <ul> 是**容器元素**，瀏覽器默認不處理其點擊事件（不像 <button>/<a> 等交互元素）。
• 雖可通過 addEventListener 綁定，但語義不當，且內部 <li> 點擊會冒泡觸發，易誤觸發。

正確做法

1. 給具體交互元素綁定（推薦）

<ul id="menu">
  <li><button onclick="doAction(1)">項目 1</button></li>
  <li><button onclick="doAction(2)">項目 2</button></li>
</ul>

2. 事件委托（列表項動態/數量大）

<ul id="menu">
  <li data-id="1">項目 1</li>
  <li data-id="2">項目 2</li>
</ul>

<script>
document.getElementById('menu').addEventListener('click', function(e) {
    const li = e.target.closest('li');
    if (li) {
        const id = li.dataset.id;
        doAction(id);
    }
});
</script>

3. 若必須在 <ul> 上捕獲，需設置 CSS 使其可聚焦

<ul tabindex="0" onclick="console.log('ul clicked')">...</ul>
// 需用戶先 Tab 聚焦或點擊空白區域才觸發，體驗極差，不推薦

最佳實踐清單

避坑提示

• 不要在 <ul>/<ol>/<table> 等容器元素直接寫 onclick，語義錯誤且兼容性差。
• 事件委托時注意 e.target 可能是內部 <span>/<img>，必須用 closest() 向上查找目標元素。
• 無障礙：交互元素用 <button> 而非 <div onclick>，支持鍵盤 Tab/Enter 操作。

結論：<ul> 本身不適合直接綁定點擊，**事件委托**或**內部放交互元素**是正規解法。