點擊監聽器與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/