Difference between click listener with jQuery and Javascript

Question

i tried to add a smoothScroll animation on each button that has a .smoothScroll class.

so i did this:

// 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/

I don't know if you noticed what happened, but there is a little flash when the click triggered ( the scrollbar goes down a little before smoothscrolling )

But when i tried with full Jquery like this:

$('.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;
});

I don't have this bubbling effect: https://jsfiddle.net/34w72v1v/

Do you have any idea what could cause this issue with querySelectorAll method?

I try to not use jQuery so i need to know what's happening to learn :)

Thanks for your time.

$('html, body').stop().animate({ scrollTop: offset - (window.innerHeight/2) + ($(this.hash).innerHeight()/2) }, 400 ); does not look like I try to not use jQuery. — Regent
– Regent, Commented Apr 30, 2015 at 13:34
Why would you try not to use jQuery? It's there to make things simpler and shorter. If it is already in the website, then not using it is a waste :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Apr 30, 2015 at 13:34
FWIW, return false has no special side-effect in addEventListener handlers. — Lye Fish
– Lye Fish, Commented Apr 30, 2015 at 13:36
I see what you're talking about in Chrome. Check out the answers below, they're spot on. — Fata1Err0r
– Fata1Err0r, Commented Apr 30, 2015 at 13:39

iCollect.it Ltd · Accepted Answer · 2015-04-30 13:36:54Z

5

You need to preventDefault() in javascript to stop the window moving to the bookmark anchor:

// 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 is just a shortcut used for jQuery events to trigger both e.preventDefault() and e.stopPropagation().

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

answered Apr 30, 2015 at 13:36

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gbreux Over a year ago

Thank you for your fast answer, i didn't know for the return false and i did try with preventDefault but i didn't prevent on the right call (i did on .call instead of the listerner.. awfull :D) Thanks again! (you were too fast, i can't accept the answer right know, i will asap :))

Community · Accepted Answer · 2017-05-23 12:22:11Z

3

It's because of the return false. In jQuery, returning false from an event handler prevents the default behaviour taking place. In a (non-inline) JavaScript event handler, it does nothing. For more info, see this excellent answer.

Since your trigger is a <a href="#test" class="smoothScroll">Go to test</a>, upon clicking it the non-jQuery version is taking you down to the #test element, but in jQuery it isn't (since the default behaviour is being cancelled)... hence the flash.

If you either don't return false in jQuery, or add e.preventDefault() in the JavaScript version, you'll notice you can control the flash.

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

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Apr 30, 2015 at 13:37

Matt

75.4k26 gold badges156 silver badges181 bronze badges

2 Comments

Lye Fish Over a year ago

Nitpick... Only in addEventListener() handlers does return false; do nothing. In "property bound" handlers, it triggers e.preventDefault();. :-)

Gbreux Over a year ago

Thanks for your answer, it's pretty clear to me now :)

Collectives™ on Stack Overflow

Difference between click listener with jQuery and Javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related