使用jQuery和Javascript的单击侦听器之间的区别

我尝试在每个有.smoothScroll类的按钮上添加一个smoothScroll动画

所以我这样做了：

// SmoothSCroll
var smoothScroll = document.querySelectorAll('.smoothScroll');
[].forEach.call(smoothScroll, function (el) {
  el.addEventListener('click', function() {
        var offset = $(this.hash).offset().top;
        $('html, body').stop().animate({
            scrollTop: offset - (window.innerHeight/2) + ($(this.hash).innerHeight()/2)   
        }, 400 ); 
        return false;
  });
});

我不知道你是否注意到发生了什么，但是当点击触发时会有一点闪光（在平滑滚动之前滚动条会下降一点）

但当我尝试使用完整Jquery时，如下所示：

$('.smoothScroll').click(function(e){
        var offset = $(this.hash).offset().top;
        $('html, body').stop().animate({
            scrollTop: offset - (window.innerHeight/2) + ($(this.hash).innerHeight()/2)   
        }, 400 ); 
    return false;
});

我没有这种冒泡效应：

您知道querySelectorAll方法出现此问题的原因吗

我尽量不使用jQuery，所以我需要知道发生了什么事情来学习：）

谢谢您的时间。

您需要使用javascript中的preventDefault（）来阻止窗口移动到书签锚：

return false

只是jQuery事件触发

e.preventDefault（）

和

e.stopPropagation（）的快捷方式

这是因为
返回false
。在jQuery中，从事件处理程序返回false可以防止发生默认行为。在（）JavaScript事件处理程序中，它什么也不做。有关详细信息，请参阅

由于触发器是一个
，单击它时，非jQuery版本会将您带到
#test
元素，但在jQuery中它不是（因为默认行为被取消）。。。因此闪光

如果在jQuery中不返回false，或者在JavaScript版本中添加
e.preventDefault（）
，您会注意到可以控制flash



$（'html，body'）.stop（）.animate（{scrollTop:offset-（window.innerHeight/2）+（$（this.hash.innerHeight（）/2）}，400）看起来不像我尝试不使用jQuery。为什么您要尝试不使用jQuery？它的存在是为了让事情变得简单和简短。如果它已经存在于网站中，那么不使用它是一种浪费：）它只是为了学习。FWIW，
return false
在
addEventListener
处理程序中没有特殊的副作用。我明白你在Chrome中所说的。看看下面的答案，它们很准确。挑剔。。。只有在
addEventListener（）
处理程序中，
才会返回false什么都不做。在“属性绑定”处理程序中，它触发
e.preventDefault（）：-）谢谢你的回答，现在我已经很清楚了：）谢谢你的快速回答，我不知道返回值是否为false，我尝试了preventDefault，但我没有阻止正确的呼叫（我是在.呼叫而不是侦听器..awfull:D）再次感谢！（你太快了，我现在无法接受答案，我会尽快：）
// SmoothSCroll
var smoothScroll = document.querySelectorAll('.smoothScroll');
[].forEach.call(smoothScroll, function (el) {
  el.addEventListener('click', function(el) {
      el.preventDefault();
        var offset = $(this.hash).offset().top;
        $('html, body').stop().animate({
            scrollTop: offset - (window.innerHeight/2) + ($(this.hash).innerHeight()/2)   
        }, 400 ); 
  });
});