在这种情况下使用 onclick 事件处理程序是否可以接受？答案

【问题标题】：Is it acceptable to use the onclick event handler in this case?在这种情况下使用 onclick 事件处理程序是否可以接受？
【发布时间】：2012-08-22 07:40:51
【问题描述】：

我有一个带有子菜单的简单导航菜单。当在同一页面上单击子菜单中的链接时，窗口会使用 jQuery 滚动到相应的锚点。

这是一个子菜单列表项的示例：

<li><a href="page.html#some-anchor" onclick="clickScroll('#some-anchor');"><span>foo</span></a></li>

对应的锚点如下：

<a class="hidden-anchor" id="some-anchor" name="some-anchor"></a>

JavaScript 函数：

function clickScroll(dest) {
    $('html, body').stop().animate({
        scrollTop: $(dest).offset().top
    }, 1000);
}

这一切都很好，但像我之前的许多人一样，我一直在读到内联事件处理程序这些天是不好的做法。

如何修改函数以消除任何 onclick 调用的需要？请记住，每个子菜单链接对应一个不同的锚点。

【问题讨论】：

标签： javascript jquery javascript-events event-handling

【解决方案1】：

假设您希望所有带有哈希 # 的锚滚动到具有相同 ID 的相应锚，您可以遍历所有锚，解析出哈希并滚动到相同 ID：

$('a').each(function() {
    if ( this.hash ) {
        $(this).click(function(e) {
            $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
            e.preventDefault();
        });
     }
});

http://jsfiddle.net/nGfW5/

如果您想将此功能限制为某些锚点，请添加一个类并将其插入选择器中，f.ex $('a.hashlink').each(

【讨论】：

我尝试了这种方法，以及 Mythril 的方法，但似乎在可以调用 click 函数之前解析了 href，因为页面只是像平常一样转到锚点而不是滚动。这可能吗？如果是这样，我应该删除href（或者只是将它们更改为'#'）并只使用相应的ID（即#some-anchor-link）吗？
您的示例确实有效（前提是您压缩了结果窗口），但我无法让它在我的代码中工作。就像你建议的那样，我将 .submenu-link 类添加到子菜单中的所有锚点，并将选择器更改为 $('a.submenu-link')。
我认为问题可能是子菜单链接的 href 是“page.html#some-anchor”，并且链接正在尝试滚动到具有该 ID 的锚点。对吗？
@Bobe 不，脚本使用href (this.hash) 的哈希值，即#some-anchor。这就是我的小提琴的工作原理。您可能应该添加一些日志并查看代码中断的位置。
啊，我明白了。我忽略了将脚本放在 (document).ready() 函数中。感谢您的帮助。

【解决方案2】：

使用事件处理程序：http://api.jquery.com/on/

<li><a id="some-scroll-source" href="page.html#some-anchor"><span>foo</span></a></li>

<a class="hidden-anchor" id="some-anchor" name="some-anchor"></a>

(function () {
    function clickScroll() {
        var dest = $('#' + ($(this).attr('href').split('#')[1]));
        $('html, body').stop().animate({
            scrollTop: $(dest).offset().top
        }, 1000);
    }

    $('#some-scroll-source').on('click', clickScroll);;
}());

【讨论】：

【解决方案3】：

试试这个：

$('li a').each (function () {
    $(this).click(function () {
        $('html, body').stop().animate({
           scrollTop: $(this.hash).offset().top
        }, 1000);
    });
});

【讨论】：

我认为OP想要滚动到相应锚点的ID，而不是被点击的锚点。