preventDefault 仍然滚动到页面顶部答案

【问题标题】：preventDefault still scrolls to top of pagepreventDefault 仍然滚动到页面顶部
【发布时间】：2012-05-21 16:08:35
【问题描述】：

我有以下代码，当您单击链接时，除了触发和警报之外，它应该可以阻止任何事情发生。链接目标已取消，但单击链接可滚动至页面顶部。我怎样才能阻止这种行为？谢谢

$('a#target').click(function(event){
    event.preventDefault();
    alert('End of demo');
});

更新我的链接如下所示：

<a href="#">Submit</a>

【问题讨论】：

能否请您包含用于此的 HTML ...as it works perfectly fine to me ！
其实works perfectly fine for me too ?

标签： jquery preventdefault

【解决方案1】：

不，preventDefault 不应该停止任何事情，它应该完全按照它所说的去做 - 阻止默认操作。即，如果您单击带有 href 的链接，它将阻止浏览器的默认操作是转到该链接。

如果要停止附加到该链接的所有其他事件，则必须在事件处理程序结束时返回 false 并确保该事件处理程序在任何其他事件之前执行。

更新：

感谢您发布链接和 href 值。我敢打赌，发生的事情是 JavaScript 在点击处理程序被触发之前遇到了错误。正如对此答案的第一条评论正确表明的那样 - preventDefault 也应该防止链接跳转到页面内的锚点。如果不是这样，那就行了，那可能是因为页面上的其他地方存在 JavaScript 错误。

说了这么多，你确定你发布的 HTML 是正确的吗？

$('a#target').click(...

将点击处理程序附加到如下所示的链接：

<a href="#" id="target">Submit</a>

最后一个想法 - 如果锚元素仅通过 JavaScript 附加了操作，那么为什么要指定选项 href 属性呢？

【讨论】：

在这种情况下，由于它针对的是锚点，因此它应该停止的默认操作的一部分是正常的页面跳转。
在原始帖子中，我们所知道的是它的目标是一个 id 为 target 的锚 - 我们无法知道它是否有一个 href，或者它的 href 是否指向一个目标页面或外部页面。
AFAIK，哈希将导致页面跳转到顶部，除非您停止、阻止或阻止它。是的，我们需要查看更多代码才能正确回答问题，所以我不确定您为什么回答。
哈希是库（如 jQuery）用来识别元素的“选择器”的一部分。 a#target 表示具有目标 id 的锚点。选择器中的哈希与锚的潜在 href 值无关。
我更新了我的问题。从您所说的看来，删除 # 应该可以解决此问题。

【解决方案2】：

可以通过简单的设置来修复 href='#!'

因为不会有 id='!' 的元素它不会跳到任何地方。

【讨论】：