JS 點擊圖片無反應？小心 `click` 方法名衝突陷阱

問題重現

<img onclick="click()" id="rockman" src="..." />
<script>
function click() { // 自定義函數
    var username = prompt('what is your name?', 'enter your name here.');
    if (username && username != 'enter your name here.') 
        alert('It is good to see you, ' + username + '.');
}
</script>

點擊圖片，`prompt`/`alert` 均不彈出，主控台無錯誤。

根因：`click` 是 `HTMLElement` 原生方法

<img> 元素繼承自 `HTMLElement`，原生擁有 click() 方法 (程式化觸發點擊事件)。內聯事件處理器 `onclick="click()"` 的作用域是**該元素本身**，呼叫 `click()` 解析為 `this.click()`，即**觸發元素原生點擊**，進入無限遞迴或被瀏覽器忽略，**而非呼叫全域 `window.click()` 函數**。

解決方案

方案一：明確指定 `window` 作用域 (最小改動)

<img onclick="window.click()" ... />

方案二：重新命名函數 (推薦，避免衝突)

function handleImageClick() { ... }
<img onclick="handleImageClick()" ... />

方案三：現代事件綁定 (最佳實踐，分離結構行為)

<img id="rockman" src="..." />
<script>
document.getElementById('rockman').addEventListener('click', function() {
    var username = prompt('what is your name?', 'enter your name here.');
    if (username && username !== 'enter your name here.') 
        alert('It is good to see you, ' + username + '.');
});
</script>

延伸：其他常見 DOM 原生方法名衝突

命名規範建議

• 事件處理器函數採用 **動詞 + 名詞** 格式：`handleImgClick`, `onSubmitForm`, `toggleMenu`。
• 避免使用任何 **DOM 原生方法名** 作為全域函數名。
• 啟用 ESLint 規則 `no-restricted-globals` 或 `no-shadow-restricted-names` 自動檢測。

這個陷阱是 JavaScript **作用域鏈** 與 **DOM 原型鏈** 交互的經典案例，理解後終身受益。