preventDefault stops function from working

Question

I have this jquery:

jQuery('#overlayBtn').click(function(e){
    e.preventDefault();
    jQuery('#overlay').css('display','flex');
});

If I remove the preventDefault() it works fine but the page jump up to the top as I have a # as the href. I want to stop the default click behavior but make my overlay show.

How do I do this?

Answer 1

Just add at the end of function return false;

jQuery('#overlayBtn').click(function(e) {
    jQuery('#overlay').css('display','flex');
    return false;
});

Answer 2

As another user said before, return false; could be the soulution for this case but consider this is not a good practice.

Please refer to the following link to see why you shold't use that line of code: https://web.archive.org/web/20160603125641/http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

In addition, you can use the attribute href="javascript:void(0)" to achieve the same result.