JavaScript 判斷元素是否被點擊：事件監聽器模式

需求

判斷頁面上第一個 <a> 標簽是否被點擊。

標準做法：事件監聽器

// 1. 獲取目標元素
var firstLink = document.querySelector('a'); // 第一個 a 標簽
// 或 document.getElementsByTagName('a')[0]

// 2. 綁定點擊事件
firstLink.addEventListener('click', function(event) {
    alert('你點擊了第一個鏈接！');
    // 阻止默認跳轉（可選）
    // event.preventDefault(); 
    // 執行業務邏輯...
});

// 3. 若需「檢查是否曾被點擊」，需狀態變量
var clicked = false;
firstLink.addEventListener('click', function() {
    clicked = true;
    console.log('已點擊');
});

// 後續判斷
if (clicked) { /* ... */ }

jQuery 寫法

$('a:first').on('click', function(e) {
    alert('第一個 a 被點擊');
    // e.preventDefault(); // 阻止默認
});

事件委託 (動態添加元素)

document.body.addEventListener('click', function(e) {
    if (e.target.matches('a:first-of-type')) {
        alert('第一個鏈接被點擊（委託模式）');
    }
});

注意事項

• querySelector('a') 只匹配文檔中**第一個** <a>，動態添加的不影響。
• 若有多個符合條件，用 querySelectorAll 循環綁定或事件委託。
• 現代開發推薦 addEventListener 而非內聯 onclick="..."，分離關注點。