停止 javascript onclick '页面跳转'答案

【问题标题】：Stop javascript onclick 'page jumping'停止 javascript onclick '页面跳转'
【发布时间】：2010-12-27 19:09:26
【问题描述】：

似乎无法阻止跳转到页面顶部的行为。

我已经尝试了这里建议的一切 preventing onclick page jumps

还有什么办法可以阻止 onclick 页面跳转？

谢谢。

这是 HTML 和 JS 的 sn-p

HTML:

<a href="javascript: return null;" onclick='javascript:getPosts("page=1&display=all"); return false;'>Everyone</a>


JS:

function getPosts(qry) {
    var thePage = 'posts.php?' + qry;
    myReq.open("GET", thePage, true);
    myReq.onreadystatechange = theHTTPResponse;
    myReq.send(null);
}

function theHTTPResponse() {
    if (myReq.readyState == 4) {
        if(myReq.status == 200){
            var response = myReq.responseText;
            document.getElementById('posts').innerHTML = response;
        }
    } else {
        document.getElementById('posts').innerHTML = '<img src="images/ajax-loader.gif" />';
    }
}

【问题讨论】：

是的，给我们一些可以用来重现您的错误的东西。
这是在哪些浏览器中发生的？

标签： javascript ajax onclick

【解决方案1】：

在 onclick 中返回 false 确实是要走的路。如果这对您不起作用，我们需要查看代码。

【讨论】：

【解决方案2】：

我一直用：

<a href=""></a>

主要是因为我讨厌这样使用

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

将# 附加到网址的末尾。

编辑：

您确定这不是特定于浏览器的问题或偏好吗？

【讨论】：

如果您在 onclick 中返回 false，则不会将 # 附加到 URL。
在这种情况下，最好不要使用锚标签。如果该元素实际上不是链接，则不要将其设为一个。如果这是目标，请使用 CSS 设置 <span>（或其他）样式以模仿链接的外观。
@Tegeril，谢谢，我已经尝试过这些，但我仍然得到相同的行为。 @Peter Bailey，我尝试过使用 span 而不是锚点，即。 blah，仍然没有停止页面跳转。看起来我需要深入研究这个，只是不知道从哪里开始。我的 php 脚本返回正常的 html 标签
@Sneaky，我的代码中肯定发生了一些事情，我已经在 IE 和 FF 中测试了所有解决方法。
Safari？歌剧？我不在乎这两个。

【解决方案3】：

你只需要

<a href="javascript:">My Link!</a>

并向标签添加您需要的任何其他属性。

【讨论】：

谢谢 Jason，也试过了，但是 onclick 仍然让它“跳跃”。 :(
您是否尝试过使用 jquery $.post 而不是您的方式？
...扩展，使用 jquery 你根本不必使用OnClick 属性，这样就可以完全摆脱你的页面跳转......
谢谢，我会调查一下，我是 web 开发的新手，这只是我正在经历的一个直接的“ajax”示例，还没有使用 jquery。
@bailey - !!!你需要立即开始！它会让你的生活变得更轻松，并且你将学习普通的 JS 作为副产品 :) 在 jquery 中进行标准的 ajax 调用：$.post('example.com', data, function() { callback logic }); SOOOO 容易

【解决方案4】：

据我所知，事件已经是 JS 所以，你不需要把onclick="javascript:..."。试试这个：

<a href="javascript: return null;" onclick='getPosts("page=1&display=all"); return false;'>Everyone</a>

【讨论】：

【解决方案5】：

<a href="javascript:;" onclick="...">Everyone</a>

注意分号。

【讨论】：

【解决方案6】：

奇怪的是，在我删除了我的 php 脚本的内容，保存，然后重新插入相同的内容后，问题得到了纠正。不确定这有什么影响，但似乎可以解决跳跃问题。

我猜这个问题永远不会是在 onclick 中返回 false。

感谢大家的时间！

【讨论】：

【解决方案7】：

这是我使用的，它有效

<a href="javascript:getPosts('page=1&display=all'); return false;">Everyone</a>

当涉及到使用与 'onClick' 事件相关联的函数的 ajax 请求时，因为 href 总是为我解决页面跳转问题。

【讨论】：

【解决方案8】：

href="javascript:void(0);"

【讨论】：

【解决方案9】：

href="javascript:undefined" 应该可以解决问题

【讨论】：