javascript - jQuery preventDefault in a function - Stack Overflow

admin管理员组

文章数量:1205763

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

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

• javascript
• jquery

Share Improve this question Follow edited Dec 2, 2012 at 18:47 Alan Shortis asked Nov 21, 2012 at 22:18 Alan ShortisAlan Shortis 1,10933 gold badges1818 silver badges3838 bronze badges 1

• 1 Is there a reason you are using inline javascript?? – PeeHaa Commented Nov 21, 2012 at 22:21

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 15

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>

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.

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
}

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

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.

本文标签： javascriptjQuery preventDefault in a functionStack Overflow