Javascript 函数中的jQuery默认值

我在如下元素事件上使用了

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

---

您可以从事件处理程序返回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
}

功能部分滚动（id）{
history.pushState（null，null，“#”+id）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+id）.offset（）.top
}, 1000);
return false；//注意上面的onclick属性中添加了return关键字
}

您可以使用jQuery来处理单击事件，就像您处理其他示例一样：

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

$（“#服务链接”）。单击（功能（e）{
var id=“服务”；
history.pushState（null，null，“#”+id）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+id）.offset（）.top
}, 1000);
e、 预防默认值（）；
}

这将允许您对事件调用

preventDefault

这也更好，因为您将不再使用内联Javascript，并且您的事件逻辑都可以使用一个方法（即jQuery）来处理，而不是使用jQuery和一些内联方法

---

我建议阅读“”，了解为什么应该避免使用内联脚本。

您可以在js本身而不是HTML中分配事件处理程序

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

---

好的，如果您真的想使用内联事件处理程序（尽管不推荐），请尝试以下方法：

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

功能部分滚动（id，e）{
e、 预防默认值（）；
history.pushState（null，null，“#”+id）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+id）.offset（）.top
}, 1000);
}

如果.on（“click”）在正文或html中添加了“overflow:hidden”，则即使使用e.preventedfalt（），页面仍会滚动到顶部在回调中。

您使用内联javascript有什么原因吗？谢谢您的回答；剩下的答案只是说明了我已经知道并在问题中提到的内容！虽然我同意使用内联js不是一个好主意（我尽可能避免），有时它是必需的。我也很想知道从另一个函数调用函数时如何做到这一点。我将稍后对此进行测试，如果它有效，则标记为答案。

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

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