js实现首次点击
实现首次点击功能的 JavaScript 方法
事件监听绑定
使用 addEventListener 绑定点击事件，触发后立即移除监听器，确保只执行一次。示例代码：
const button = document.getElementById('myButton');
function handleFirstClick() {
console.log('首次点击触发');
button.removeEventListener('click', handleFirstClick);
}
button.addEventListener('click', handleFirstClick);数据属性标记
通过 DOM 元素的 dataset 属性记录点击状态。首次点击后修改标记值：
document.querySelector('.target').addEventListener('click', function() {
if (!this.dataset.clicked) {
console.log('首次点击');
this.dataset.clicked = 'true';
}
});闭包变量控制 利用闭包特性保持点击状态的私有变量：
const setupFirstClick = (element) => {
let clicked = false;
element.addEventListener('click', () => {
if (!clicked) {
console.log('首次触发');
clicked = true;
}
});
};
setupFirstClick(document.getElementById('btn'));jQuery 的 one 方法
如果使用 jQuery 库，可直接使用 .one() 方法：
$('#jqButton').one('click', function() {
alert('该回调只会执行一次');
});注意事项
- 移动端需考虑
touchstart与click事件的兼容性 - 事件委托场景下需检查事件目标对象
- 异步操作时需保持状态一致性
