点击监听器与jQuery和Javascript之间的区别

Question

我试图在每个具有.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; 
    }); 
}); 

https://jsfiddle.net/jt2jo3pt/2/

，如果你注意到发生了什么，但有一点闪光灯时，点击触发我不知道（滚动条下降一点点前smoothscrolling）

但是当我试图用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; 
}); 

我没有这个冒泡的效果：https://jsfiddle.net/34w72v1v/

你知道什么可能会导致这个问题与querySelectorAll方法吗？

我尽量不使用jQuery，所以我需要知道发生了什么，了解你的时间:)

感谢。

Answer 1

您需要的preventDefault（）在JavaScript停止窗口移动到书签主播：

// 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); 
    }); 
}); 

return false只是用于jQuery的事件来触发这两个e.preventDefault()和e.stopPropagation()的快捷方式。

https://jsfiddle.net/TrueBlueAussie/jt2jo3pt/4/

Answer 2

这是因为return false的。在jQuery中，从事件处理程序返回false可防止发生默认行为。在（non-inline）JavaScript事件处理程序中，它什么也不做。有关更多信息，请参见this excellent answer。因为你的触发器是<a href="#test" class="smoothScroll">Go to test</a>，点击它后，非jQuery版本会带你到#test元素，但在jQuery中它不是（因为默认行为被取消）...因此，闪光灯。

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

https://jsfiddle.net/34w72v1v/1/
https://jsfiddle.net/jt2jo3pt/3/