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

如果在顯示彈出窗口后不再需要跟蹤滾動事件，則應“解除綁定”處理程序。 例如：

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

Answer 2

您可以通過多種方式執行此操作：

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布爾值而不會觸發