Javascript 如何防止点击&x27#'；从跳转到页面顶部的链接？

我目前正在使用

---

但我讨厌“#”使页面跳到页面顶部的方式。我能做些什么呢？

在jQuery中，当您处理单击事件时，返回false以阻止链接以通常的方式响应，从而防止发生默认操作，即访问

href

属性（根据PoweRoy的注释和）：

---

您可以使用

event.preventDefault（）

来避免这种情况。请在此处阅读更多内容：。

您甚至可以这样写：

<a href="javascript:void(0);"></a>

<a href="#null" class="someclass">Text</a>

---

我不确定这是不是一个更好的方法，但这是一个方法：）

如果你想使用锚，你可以像其他答案一样使用

还可以使用任何其他元素（如跨度）并将单击事件附加到该元素

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

只需使用

而不是

，并根据需要使用CSS将其样式设置为链接

按钮专门用于单击，不需要任何href属性

最好的方法是使用onload操作来创建按钮，并通过javascript将其附加到需要的位置，这样禁用javascript后，按钮将不会显示，也不会混淆用户

---

当您使用

href=“#”

时，您会得到大量指向同一位置的不同链接，而当代理不支持JavaScript时，这些链接就不起作用了。

如果元素没有有意义的href值，那么它就不是真正的链接，那么为什么不使用其他元素呢

正如Neothor所建议的那样，跨度同样合适，如果样式正确，那么作为一个可以点击的项目，跨度将是显而易见的。您甚至可以附加一个悬停事件，当用户的鼠标在元素上移动时，使其“亮起”

然而，说到这里，您可能想重新考虑站点的设计，使其在不使用javascript的情况下运行，但在可用的情况下通过javascript进行增强。

只需使用

<a href="javascript:;" class="someclass">Text</a>

---

您可以只传递一个不带href属性的锚定标记，然后使用jQuery执行所需的操作：

---

bar

所以这是旧的，但是。。。以防有人在搜索中发现这个

---

只需使用

“#/”

而不是

“#”

，页面将不会跳转。

在处理jquery后，也可以返回false

<a href="#0" class="someclass">Text</a>

例如

$（“.clickableAnchor”）.live(
“点击”，
函数（）{
//你的代码
return false；//我使用如下内容：

<a href="javascript:void(0);"></a>

<a href="#null" class="someclass">Text</a>


带有href=“#”的链接几乎总是应该替换为按钮元素：

<button class="someclass">Text</button>

文本

使用带有href=“#”的链接也是一个可访问性问题，因为这些链接对屏幕阅读器是可见的，屏幕阅读器将读取“链接-文本”，但如果用户单击它，它将不会去任何地方。
我使用了：

<a href="javascript://nop/" class="someClass">Text</a>

要防止页面跳转，需要在调用
e.preventDefault（）；
后调用
e.stopPropagation（）；
：

stopPropagation
阻止事件进入DOM树。此处的详细信息：
如果要迁移到同一页面上的锚节而不跳页，请使用：

只要用“#/”而不是“#”
e、 g

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..


页面不会在单击时跳转。。
您可以将
#0
用作href，因为
0
不允许作为id，因此页面不会跳转

<a href="#0" class="someclass">Text</a>

在
#
之后添加内容将页面焦点设置为具有该ID的元素。最简单的解决方案是使用
#/
，即使您正在使用jQuery。但是，如果您在jQuery中处理事件，
event.preventDefault（）
是一个不错的选择。
这个
#/
技巧可以工作，但会在浏览器中添加一个历史事件。因此，单击“上一步”并不能像用户希望/期望的那样工作

$（'body'）。单击（'a[href=“#”]”，函数（e）{e.preventDefault（）}）；
是我的做法，因为它适用于已经存在的内容以及加载后添加到DOM中的任何元素

具体来说，我需要在
.btn组
内的引导下拉菜单中执行此操作，因此我做到了：

$（'body'）。单击（'.下拉菜单li a[href=“#”]”，函数（e）{e.preventDefault（）}）；

通过这种方式，它是有针对性的，并且不会影响页面上的任何其他内容。
解决方案#1：（普通）

解决方案3：（需要
jQuery
）

$（'a.someclass'）。单击（函数（e）{
e、 预防默认值（）；
});
我一直使用：

<a href="#?">Some text</a>



当试图阻止页面跳转时。不确定这是否是最好的，但它似乎多年来一直运行良好。
有4种类似的方法可以防止页面在没有任何JavaScript的情况下跳转到顶部：

备选案文1：

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



备选案文2：

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



备选案文3：

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



选项4（不推荐）：



但是，如果您在jQuery中处理click事件，最好使用
event.preventDefault（）
。
如果必须多次单击同一输入，
和
将不起作用。对于多个输入，每次只需单击一次事件

最好的方法还是使用

那么

@pranay:OP指定他正在使用jQuery处理这些链接。与其返回false，不如执行event.preventDefault（）。这对阅读您的代码的人来说更清楚。@PoweRoy:明白了。我进行了编辑，学到了一些新东西：）@BoltClock OP应该使用按钮来处理点击事件，而不是锚定。您的答案非常有用，但如果href指向某个地方，您此时不需要重定向。防止根本不需要的默认行为是一种建议，如：拿起刀子，抓住刀片，用h锤击钉子andle:）为工作选择正确的工具！如果jquery:
$（'a[href=#]'）。单击（函数（e）{e.preventDefault（）；}）
此处重复我和David Dorward在一起，
<a href="#?">Some text</a>

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

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

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

<a href="javascript:void(0);">Link</a>

event.preventDefault();