如何实现JavaScript页面点击仅触发一次Alert弹窗

嗨，我来帮你搞定这个问题！你的代码之所以每次点击都会弹出提示，是因为两个小bug：

• 你在点击事件的回调函数里重新用var声明了click_count = 1;，这会创建一个局部变量，完全和外面的click_count不是同一个，所以外部的变量永远是0，判断等于没起作用。
• 你的if (click_count == 0)是在页面初始化时只执行一次，只要初始化时变量是0，就会绑定点击事件，但之后每次点击都会触发回调，没有在点击时判断是否已经触发过。

下面给你两种靠谱的解决方案：

方案1：修正变量作用域与判断逻辑 #

调整代码结构，把判断放在点击事件内部，并且不要重新声明变量：

$( document ).ready(function() {
  var click_count = 0;
  $('body').click(function(){
    if (click_count === 0){
      alert("这是唯一一次弹窗！");
      click_count = 1;
    }
  });
});

这样每次点击时都会检查计数器，第一次点击后计数器变成1，后续点击就不会再触发弹窗了。

方案2：使用jQuery的one()方法（更简洁） #

jQuery专门提供了one()方法，它会给元素绑定一个仅执行一次的事件处理函数，执行后自动解绑事件，不用手动管理计数器：

$( document ).ready(function() {
  $('body').one('click', function(){
    alert("这是唯一一次弹窗！");
  });
});

这种方式代码更简洁，也更符合“仅触发一次”的需求场景，推荐优先使用。

内容的提问来源于stack exchange，提问作者user2256727