如何防止点击'#'从跳转到页面顶部的链接?

在jQuery中，当你处理点击事件时，返回false以停止链接以通常的方式响应会阻止默认操作，即访问href属性，不会发生(根据PoweRoy的注释和埃里克的回答):

$('a.someclass').click(function(e)
{
// Special stuff to do when this link is clicked...


// Cancel the default action
e.preventDefault();
});

你可以使用event.preventDefault()来避免这种情况。在这里阅读更多:http://api.jquery.com/event.preventDefault/。

你甚至可以这样写:

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

我不确定这是一个更好的方法，但这是一个方法:)

如果你想使用一个锚，你可以像其他答案一样使用http://api.jquery.com/event.preventDefault/。

您还可以使用任何其他元素，如span，并将单击事件附加到它。

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

只要使用<input type="button" />而不是<a>，并使用CSS样式它看起来像一个链接，如果你愿意的话。

按钮是专门用于单击的，它们不需要任何href属性。

最好的方法是使用onload动作来创建按钮，并通过javascript将其附加到需要的位置，因此禁用javascript后，它们根本不会显示，也不会使用户感到困惑。

当你使用href="#"时，你会得到大量指向相同位置的不同链接，当代理不支持JavaScript时，这将不起作用。

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

正如Neothor所建议的那样，如果样式正确，span将作为一个可以点击的项目而显而易见。你甚至可以附加一个悬停事件，让元素在用户鼠标移动时“亮起”。

然而，话虽如此，你可能想要重新考虑你的网站的设计，这样它就可以在没有javascript的情况下运行，但在有javascript时可以通过javascript进行增强。

只使用

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

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

你可以只传递一个没有href属性的锚标记，并使用jQuery来执行所需的操作:

<a class="foo">bar</a>

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

只要使用"#/"而不是"#"，页面就不会跳转。

你也可以在处理jquery后返回false。

如。

$(".clickableAnchor").live(
"click",
function(){
//your code
return false; //<- prevents redirect to href address
}
);

我使用的方法是这样的:

<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树向上移动。更多信息:https://api.jquery.com/event.stoppropagation/

如果你想要迁移到同一页面上的锚节，而不需要页面跳转，请使用:

用“#/”代替“#” 如< / p >

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

$('a[href="#"]').click(function(e) {e.preventDefault(); });

你可以使用#0作为href，因为0不允许作为id，所以页面不会跳转。

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

在#之后添加内容会将page的焦点设置为具有该ID的元素。最简单的解决方案是使用#/，即使你使用jQuery。然而，如果你是在jQuery中处理事件，event.preventDefault()是可行的方法。

#/技巧有效，但会向浏览器添加一个历史事件。因此，点击返回并不能像用户希望的那样工作。

$('body').on('click', 'a[href="#"]', function(e) {e.preventDefault() });是我去的方式，因为它适用于已经存在的内容，以及加载后添加到DOM的任何元素。

具体地说，我需要在.btn-group(参考)中的引导下拉菜单中做到这一点，所以我做了:

$('body').on('click', '.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

这样它是有针对性的，并且不会影响页面上的任何其他内容。

解决方案#1:(普通)

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

解决方案#2:(需要javascript)

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

解决方案#3:(需要jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
e.preventDefault();
});
</script>

我总是用:

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

当试图阻止页面跳转时。不确定这是否是最好的，但它似乎已经工作了很多年。

有4种类似的方法可以防止页面在不使用JavaScript的情况下跳转到顶部:

选项1:

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

选项2:

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

选项3:

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

选项4 (不推荐):

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

但是如果你在jQuery中处理点击事件，最好使用event.preventDefault()。

如果必须多次点击相同的输入，<a href="#!">Link</a>和<a href="#/">Link</a>将不起作用。它只需要在多个输入上进行1次事件单击。

最好的方法仍然是使用<a href="#">Link</a>

然后,

event.preventDefault();

对我来说最简单的就是这样做。

<a href="#" onclick="return false;">Some text</a>

使用JS的原因是大多数现代网站都依赖于它。