你可以覆盖＆＃34; onscroll＆＃34;听众用另一个？

Question

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

这是一个例子。

＆＃13;

＆＃13;

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

＆＃13;

body{min-height:2000px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a>

＆＃13;

＆＃13;

＆＃13;

如何阻止 console.log（＆＃39;滚动...＆＃39;）运行？

Answer 1

您可以尝试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>

Answer 2

我并不完全明白你要做的是什么......但是，你可以在你附加新事件处理器之前，在click事件处理程序的底部取消注册滚动事件处理程序，做$(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>

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

body {
  min-height: 2000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a>

＆＃13;

＆＃13;

＆＃13;