当前位置：首页 > JavaScript

js实现首次点击

2026-01-30 23:20:31JavaScript

实现首次点击事件的 JavaScript 方法

监听点击事件并执行一次操作

使用 addEventListener 结合 { once: true } 选项，确保事件只触发一次：

document.getElementById('myButton').addEventListener('click', function() {
    console.log('首次点击触发');
}, { once: true });

通过变量标记控制首次点击

声明一个标志变量，在点击时检查并更新状态：

let isFirstClick = true;
document.querySelector('.element').addEventListener('click', function() {
    if (isFirstClick) {
        console.log('首次点击执行的操作');
        isFirstClick = false;
    }
});

移除事件监听器实现单次执行

在事件处理函数内部移除自身监听器：

function handleFirstClick() {
    console.log('仅执行一次');
    document.removeEventListener('click', handleFirstClick);
}
document.addEventListener('click', handleFirstClick);

jQuery 实现方案

如果使用 jQuery，可以通过 .one() 方法实现：

$('#target').one('click', function() {
    alert('首次点击生效');
});

实际应用示例

结合业务逻辑的典型场景：

const initButton = document.querySelector('#init');
initButton.addEventListener('click', initApp, { once: true });

function initApp() {
    // 初始化应用逻辑
    console.log('应用初始化完成');
    initButton.textContent = '已初始化';
}

注意事项

js实现首次点击