Jquery - .click() 不滚动页面答案

【问题标题】：Jquery - .click() that doesnt scroll the pageJquery - .click() 不滚动页面
【发布时间】：2011-02-08 23:50:50
【问题描述】：

我即将在 jQuery 上做一个这样的函数：

$(document).ready(function() {
    $('#header_rules').click(function() {
      // here i define myFunction()
    });
});

<a id="header_rules" href="#">RULES</a>

而不是

 <a id="header_rules" href="#" onClick="myFunction();return false">RULES</a>

但我不知道如何防止在有人单击链接后使用 jQuery 滚动到页面顶部。

事实上，我将彻底摆脱原生 JS，这可能会带来一些麻烦（这就是我使用像 jQuery 这样的 JS 框架的原因）。

有什么帮助吗？干杯

【问题讨论】：

标签： javascript jquery unobtrusive-javascript

【解决方案1】：

调用e.preventDefault();，其中e 是点击处理程序的第一个参数：

$(document).ready(function() {
    $('#header_rules').click(function(e) {
        e.preventDefault();
        // here i define myFunction()
    });
});

<a id="header_rules" href="#">RULES</a>

【讨论】：

嗯不错。哪个更好？ e.preventDefault(); 或只是 return false; ？
e.preventDefault() - 查看我对另一个答案的评论。

【解决方案2】：

下面的方法也可以，但我认为它会停止该项目上的其他点击事件。

(document).ready(function() {
    $('#header_rules').click(function() {
      // here i define myFunction()
    return false;
    });
});

【讨论】：

返回 false 也会停止事件的传播，这很可能不会导致问题，但不是真正必要的，在某些情况下它实际上会导致问题。
这取决于您是否希望点击也触发其他内容。

【解决方案3】：

ThiefMaster 所说的，你也可以在你的函数中包含 return false; 而不是 inline。

【讨论】：

他用适当的事件处理程序替换了内联 onclick 废话 - 所以他没有内联任何东西