javascript - jquery如何在单击另一个事件时禁用滚动事件

Question

这是我用来显示弹出窗口然后单击禁用它的脚本。当滚动超过一定限制时，弹出窗口会显示，然后一直保留，直到单击关闭图像。

<script>
$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

    $(window).scroll(function(){
      if($(document).scrollTop() > 325){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
    });  
    $("img#close").click(function(){
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

这工作正常，但我现在遇到的问题是，当单击关闭img并且弹出窗口消失时，当用户再次滚动时它会重新出现。

什么是禁用弹出窗口重新出现的简单且轻量级的方法？

Answer 1

如果在显示弹出窗口后不再需要跟踪滚动事件，则应该“取消绑定(bind)”处理程序。例如:

$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

  function handleWindowScroll() {
    if($(document).scrollTop() > 325){
      $(window).off('scroll', handleWindowScroll);
      $('#popupbackground').fadeIn(750);
      $('#popup').fadeIn(750);
      $('img#close').fadeIn(750);
    }
  }
  $(window).on('scroll', handleWindowScroll);

  $("img#close").click(function(){
    $("#popupbackground").hide();
    $("#popup").hide();
    $("img#close").hide();
  });
});

请注意，object.on('click', handler) 与 jQuery 中的 object.click(handler) 相同。

如果您仍然需要跟踪滚动事件并且解除绑定(bind)解决方案不起作用，您可以使用变量来代替:

$(document).ready(function(){
  var popupShown = false;

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

  $(window).scroll(function(){
    if(!popupShown && $(document).scrollTop() > 325){
      popupShown = true;
      $('#popupbackground').fadeIn(750);
      $('#popup').fadeIn(750);
      $('img#close').fadeIn(750);
    }
  });
  $("img#close").click(function(){
    $("#popupbackground").hide();
    $("#popup").hide();
    $("img#close").hide();
  });
});