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

jquery how to disable an scroll event on click of another event

本文关键字：事件 滚动 另一个 单击 jquery      更新时间：2023-09-26

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

<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并且弹出窗口消失时，当用户再次滚动时，它会重新出现。

什么是一种简单而轻便的方法来禁用弹出窗口的重新出现？

如果在显示弹出窗口后不再需要跟踪滚动事件，则应该"解除绑定"处理程序。例如：

$(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）相同。

如果你仍然需要跟踪滚动事件，而解除绑定的解决方案不起作用，你可以使用一个变量：

$(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();
  });
});

您可以通过多种方式实现这一点：

1） 设置一个变量以阻止弹出窗口触发

<script>
$(document).ready(function(){
  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();
  var hasClosed = false;
    $(window).scroll(function(){
      if($(document).scrollTop() > 325 && !hasClosed){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
    });  
    $("img#close").click(function(){
        hasClosed = true;
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

2） 在弹出窗口打开（首选）后删除滚动触发器

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

第二种方法效果最好，因为它可以防止jQuery在发生一次后触发对scrollTop（）的检查。其中作为第一个选项将继续检查，但由于false布尔而不会激发

相关文章：