防止点击页面跳转

Posted 2023-03-05

【中文标题】防止点击页面跳转

【英文标题】：preventing onclick page jumps

【发布时间】：2010-12-10 13:20:20

【问题描述】：

阻止我的 onclick 链接导致页面跳转到顶部的最佳方法是什么。

<a name="point1">
<a href="#point1" onclick="blahblah">

<a href="javascript:" onclick="blahblah">

<a href="javascript:null;" onclick="blahblah">

还是别的什么？

【问题讨论】：

我知道这不是您所要求的，但您不能使用“onclick”。示例：FOO

【参考方案1】：

我总是用

<a href="javascript:void(0)" onclick="blahblah">

【讨论】：

为我工作！ Return false; 出于某种原因无法正常工作，但这可以解决问题。谢谢。

完美运行！刚来这里是为了发现这个

imo 这对 html5 不友好

为什么不@andrei 只是好奇。

@LucasHealy 抱歉，我说这句话时不知道我在想什么，评论已经快 5 年了。答案很好。

【参考方案2】：

在 'onclick' 中返回 false 会阻止页面跳转

<a href="#" onclick="someFunction(); return false;">blah</a>

【讨论】：

现在试试这个：onClick="submitComment('+[id]+'); this.onclick=null; return false; 但它不起作用。

奇怪。返回 false 应该阻止默认链接操作。如果您只尝试 onclick='return false;' 是否有效？

尝试将 onClick 更改为 onclick。根据 MIME 类型，onClick 和 onclick 可以解释为两个不同的属性。

如果你正在做 onClick="submitComment('+[id]+'); this.onclick=null; return false; 那么很清楚为什么 return false 失败 - 你正在设置 onclick属性为null，我相信会立即停止执行。我认为。虽然没有测试过。

【参考方案3】：

试试这个：

<a href="#" onclick="func(); return false;">link</a>

注意onclick 参数返回false。返回 false 会取消默认浏览器行为。在锚标记的情况下，默认浏览器行为是跳转到# 锚（也就是页面顶部）。

使用同样的技巧，您还可以使图像不可拖动并确保链接不会窃取用户的焦点：

<img src="coolios.jpg" onmousedown="return false" /> <!-- un-draggable image -->
<a href="stuff.html" onmousedown="return false">link that doesn't steal focus</a>

【参考方案4】：

也许这样可以解决问题？

<a href="javascript: return false;" onclick="blahblah">