如何防止点击“#”链接跳至页面顶部?

2020/10/14 03:01 · javascript ·  · 0评论

我目前<a>在jQuery中使用标签来启动诸如点击事件之类的事情。

例子是 <a href="#" class="someclass">Text</a>

但是我讨厌'#'如何使页面跳到页面顶部。我该怎么办呢?

在jQuery中,当您处理click事件时, 返回false可阻止链接以通常的方式响应防止发生默认操作(访问href属性)(根据PoweRoy的评论和Erik的回答):

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

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

所以这很古老,但是...以防万一有人在搜索中找到它。

只需使用"#/"代替,"#"页面就不会跳转。

您甚至可以这样写:

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

林不知道它是一个更好的方法,但它是一种方法:)

解决方案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>

您可以使用它event.preventDefault()来避免这种情况。在此处了解更多信息:http : //api.jquery.com/event.preventDefault/

只需使用<input type="button" />代替,<a>然后使用CSS对其进行样式设置即可使其看起来像一个链接。

按钮是专门为单击而制作的,它们不需要任何href属性。

最好的方法是使用onload操作创建按钮,然后通过javascript将其附加到您需要的位置,因此禁用javascript时,它们将不会显示,也不会使用户感到困惑。

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

如果您想使用锚点,则可以使用http://api.jquery.com/event.preventDefault/,如建议的其他答案一样。

您还可以使用任何其他元素(例如跨度)并将click事件附加到该元素。

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

您可以将其#0用作href,因为0不允许将其用作ID,因此页面不会跳转。

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

只需使用

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

JQUERY

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

如果该元素没有有意义的href值,那么它实际上不是链接,那么为什么不使用其他元素呢?

正如Neothor所建议的那样,跨度是适当的,并且如果设置正确的样式,则可以作为单击项明显可见。您甚至可以附加一个悬停事件,以在用户的​​鼠标移到该事件上时使它“照亮”。

但是,话虽如此,您可能需要重新考虑网站的设计,使其不使用javascript即可工作,但可用时可用javascript进行增强。

带有href =“#”的链接几乎应始终替换为button元素:

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

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

有四种类似的方法可以防止页面在没有任何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>

但是,event.preventDefault()如果要在jQuery中处理click事件,最好使用

您可以只传递没有href属性的锚标记,然后使用jQuery进行所需的操作:

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

我用过:

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

#/技巧有效,但是将历史事件添加到浏览器。因此,单击后退不起作用,因为用户可能希望/期望这样做。

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); 是我采用的方法,因为它适用于现有内容,并且在加载后将任何元素添加到DOM。

具体来说,我需要在.btn-group(Reference)内的引导程序下拉菜单中执行此操作,所以我做了:

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

这样,它就成为目标,并且不会影响页面上的其他任何内容。

我一直使用:

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

尝试防止页面跳转时。不知道这是否是最好的方法,但是似乎已经运行了好多年。

您还可以在处理完jQuery后返回false。

例如。

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

我用这样的东西:

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

为防止页面跳动,您需要在致电e.stopPropagation();后致电e.preventDefault();

stopPropagation防止事件沿DOM树上升。此处提供更多信息:https : //api.jquery.com/event.stoppropagation/

如果要迁移到同一页面上的“锚定部分”而又不向上跳,请使用:

只需使用“#/”代替“#”即可

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

之后添加一些东西,#将页面焦点设置到具有该ID的元素上。#/即使使用jQuery,最简单的解决方案是使用但是,如果您要在jQuery中处理事件,event.preventDefault()则是一种方法。

<a href="#!">Link</a><a href="#/">Link</a>不工作,如果一个人在同一个输入点击超过一次..它只是发生在1次时点击每多投入。

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

然后,

event.preventDefault();
本文地址:http://javascript.askforanswer.com/ruhefangzhidianjilianjietiaozhiyemiandingbu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!