Question

我在像这样的元素事件上使用了preventDefault：

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

现在，我有一个函数，它已经使用了一个参数，我想使用preventDefault，但我不确定如何：

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

我尝试使用return false，但是当点击链接时，这会导致一些闪烁。

如何将preventDefault添加到上述功能？

修改

我最初的问题是在具有其他参数的函数中使用preventDefault。我最后不需要使用内联javascript（它看起来似乎没有办法避免它），所以这就是我使用的。我觉得它很整洁：

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

Answer 1

好吧，如果你真的想使用内联事件处理程序（虽然不推荐它），试试这个：

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

Answer 2

您可以像使用其他示例一样使用jQuery来处理click事件：

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

然后，您可以在活动中致电preventDefault。

这也好得多，因为你将不再使用内联Javascript，你的事件逻辑都可以使用一种方法（即jQuery）处理，而不是使用jQuery和一些内联。

我建议您阅读“Why Should I Avoid Inline Scripting?”以了解为什么要尝试避免内联脚本。

Answer 3

您可以从事件处理程序返回false：

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

Answer 4

您可以在 js 本身而不是 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);
    });

Answer 5

如果.on（＆＃34;点击＆＃34;）添加＆＃34;溢出：隐藏＆＃34;对于body或html，即使你在回调中使用e.preventDefalt（），页面也会滚动到顶部。

jQuery在函数中阻止了默认

5 个答案: