调用 onClick 函数的最佳方法是什么？ [关闭]答案

【问题标题】：What is the best way to call an onClick function? [closed]调用 onClick 函数的最佳方法是什么？ [关闭]
【发布时间】：2014-02-26 16:06:24
【问题描述】：

我已经创建了这个函数：

function go_to($valor) {
    var tamano = $valor.offset().top;
    tamano = tamano - 50;
            $('html, body').animate({
            scrollTop: tamano
            }, 2000);
        };

我从我的菜单中这样称呼它：

<ul class="right">
                <li><a onclick="go_to($('#section01'));">Section 01</a></li>
                <li><a onclick="go_to($('#section02'));">Section 02</a></li>
                <li><a onclick="go_to($('#section03'));">Section 03</a></li>
                <li><a onclick="go_to($('#section04'));">Section 04</a></li>
            </ul>

我的问题：还有其他更好的方法来调用 onclick 函数并发送它们的部分 ID？

【问题讨论】：

更好是什么意思？
作为个人选择，我总是将事件处理与jsfiddle.net/arunpjohny/qd93x/1等元素分开
感谢大家的回答。正如我发布的那样，我通常使用“onClick” html 代码在线调用我的函数，但它似乎有点过时了。我会尝试你所有的答案，看看哪一个在不同的设备和浏览器中效果更好。

标签： jquery function onclick selector

【解决方案1】：

是的，您不应该使用侵入式 JS，而是在标记之外声明事件处理程序：

$('.right a').click(function (event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $(this.href).offset().top - 50
  }, 2000);
});

HTML

<ul class="right">
    <li><a href="#section01'">Section 01</a></li>
    <li><a href="#section02'">Section 02</a></li>
    <li><a href="#section03'">Section 03</a></li>
    <li><a href="#section04'">Section 04</a></li>
</ul>

【讨论】：

【解决方案2】：

试试这个代码：

<ul class="right">
   <li><a class="link">Section 01</a></li>
   <li><a class="link">Section 02</a></li>
</ul>
$(".link").click(function(){
   var tamano = $(this).offset().top;
   tamano = tamano - 50;
        $('html, body').animate({
        scrollTop: tamano
        }, 2000);
});

【讨论】：

【解决方案3】：

您必须将 HTML 更改为：

<ul class="right">
    <li><a href="#section01">Section 01</a></li>
    ...
</ul>

你的 JS 应该是

$('.right').on('click','a',function(e){

  e.preventDefault(); // prevent default click behavior

  var target = $(this).attr('href'); //assign value of a's 'href' to 'target'

  go_to(target); // use your function

});

你的功能应该是：

function go_to(valor) {
    var tamano = $(valor).offset().top;
    tamano = tamano - 50;
    $('html, body').animate({
        scrollTop: tamano
    }, 2000);
};

【讨论】：