你能重写“onscroll”吗?使用另一个监听器

Can you override an "onscroll" listener by using another?

本文关键字：另一个 监听器 重写 onscroll      更新时间：2023-09-26

我正在处理一个问题，我想用一个专门分配给元素的全局onscroll事件侦听器覆盖。

下面是一个例子。

$("a").on('click', function(){
  console.log('Clicked');
  $('html,body').animate({scrollTop:50}, 1000);
  var count = 0;
  $(window).on('scroll', function(){
    if(count < 5)
    {
      console.log('Scrolling via link...'); 
    }
    count++;
  });
});
var globalCount = 0;
$(window).on('scroll', function(){
  if(globalCount < 5)
  {
    console.log('Scrolling...');
  }
  globalCount++;
});
body{min-height:2000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a>

我如何防止console.log('滚动…')从运行?

您可以试试event.stopPropagation() 

$("a").on('click', function(){
  console.log('Clicked');
  $('html,body').animate({scrollTop:50}, 1000);
  var count = 0;
  $(window).on('scroll', function(event){
    if(count < 5)
    {
      console.log('Scrolling via link...'); 
    }
    count++;
    //stop propagation stops the bubbling of the event down to further event handlers.
    event.stopPropagation();
  });
});
var globalCount = 0;
$(window).on('scroll', function(){
  if(globalCount < 5)
  {
    console.log('Scrolling...');
  }
  globalCount++;
});
body{min-height:2000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a>

我真的不明白你到底想做什么…但是，你可以取消注册你在点击事件处理程序底部附加的滚动事件处理程序，就在你附加新事件处理程序之前，通过$(window).off('scroll') 

$("a").on('click', function(){
  console.log('Clicked');
  $('html,body').animate({scrollTop:50}, 1000, attachGlobalListener);
  var count = 0;
  $(window).off('scroll'); //This removes the "global" event handler specified at the bottom of this snippet
  $(window).on('scroll', function(){
    if(count < 5)
    {
      console.log('Scrolling via link...'); 
    }
    count++;
  });
});
function attachGlobalListener(){
    var globalCount = 0;
    $(window).on('scroll', function(event){
      if(globalCount < 5)
      {
        console.log('Scrolling...');
      }
      globalCount++;
    });
}
//attach the listener to begin with
attachGlobalListener();
body{min-height:2000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a>

您可以使用一个标志来检查是否需要处理全局滚动事件。顺便说一句，动画完成后不要忘记取消嵌套滚动事件的绑定。下面是一个例子:

$("a").on('click', function() {
  console.log('Clicked');
  globalScroll = false;
  $('html,body').animate({
    scrollTop: 50
  }, 1000, function() {
    $(window).off('scroll.clicked');
    globalScroll = true;
  });
  var count = 0;
  $(window).on('scroll.clicked', function() {
    if (count < 5) {
      console.log('Scrolling via link...');
    }
    count++;
  });
});
var globalCount = 0,
  globalScroll = true;
$(window).on('scroll', function() {
  if (!globalScroll) return;
  if (globalCount < 5) {
    console.log('Scrolling...');
  }
  globalCount++;
});
body {
  min-height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a>

相关文章：