js实现首次点击
实现首次点击事件的 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 = '已初始化';
}注意事项
- 移动端需要对应
touchstart事件 - 事件委托场景需注意目标元素判断
- 异步操作需考虑用户重复点击的情况
