CODEWITHSUNDEEP
javascriptjquery
Alan Shortis
Alan Shortis

Reputation: 1109

jQuery preventDefault in a function

I have used preventDefault on an element event like this:

$('#element').click(function (e) {
    do stuff...
});

Now, I have a function that takes an argument already in which I would like to use preventDefault but I'm not sure how:

<a href="#services" id="services_link" class="services" onclick="sectionScroll('services')">Services</a>


function sectionScroll(id) {
    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
}

I tried using return false instead but this caused some flickering when the link was clicked.

How can I add preventDefault to the above function?

EDIT

My original question was around using preventDefault in a function that has other arguments. I didn't need to use inline javascript in the end (it was looking like there was no way to avoid it), so this is what I used. I think it's quite tidy:

<a href="#services" class="menu-link">Services</a>


   $('.menu-link').click(function (e) {
        e.preventDefault();
        var location = $(this).attr('href');
        history.pushState(null, null, location)
        $('html, body').animate({
            scrollTop: $(location).offset().top
        }, 1000);
    });

Upvotes: 6

Views: 22892

Answers (5)

Michael Mammoliti
Michael Mammoliti

Reputation: 1597

If .on("click") adds "overflow:hidden" to the body or html, the page scrolls anyway to the top, even if you use e.preventDefalt() inside the callback.

Upvotes: -1

Korikulum
Korikulum

Reputation: 2599

Well, if you really want to use inline event handlers (wouldn't recommend it though), try this:

<a href="#services" id="services_link" class="services"
   onclick="sectionScroll('services', event)">Services</a>

<script type="text/javascript">
function sectionScroll(id, e) {
    e.preventDefault();
    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
}
</script>

Upvotes: 15

Sushanth --
Sushanth --

Reputation: 55740

You can assign the event Handler in js itself instead of HTML

<a href="#services" id="services_link" class="services"
                                       data-id="services">Services</a>

/ 

 $('#services_link').on('click', function(e){
        e.preventDefault();
        // data-id is a HTML5 data attribute

        var id = $(this).data('id');
        history.pushState(null, null, '#' + id);
        $('html, body').animate({
            scrollTop: $("#" + id).offset().top
        }, 1000);
    });

Upvotes: 0

Aamir
Aamir

Reputation: 5440

You can use jQuery, like you are with the other example, to handle the click event:

<a href="#services" id="services_link" class="services">Services</a>

$('#services_link').click(function (e) {
    var id = "services";

    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);

    e.preventDefault();
}

This will then allow you to call preventDefault on the event.

This is also much better since you will no longer be using inline Javascript and your event logic can all be handled using one method (i.e. jQuery) rather than some of it being in jQuery and some inline.

I would suggest reading "Why Should I Avoid Inline Scripting?" to get an idea of why you should try to avoid inline scripting.

Upvotes: 2

Kevin Boucher
Kevin Boucher

Reputation: 16675

You could just return false from the event handler:

<a href="#services" id="services_link" class="services" onclick="return sectionScroll('services')">Services</a>


function sectionScroll(id) {
    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
    return false; // note the addition of return keyword in onclick attribute above
}

Upvotes: 0

Related Questions