具有HREF =“#”的元素导致页面在单击时重新加载

时间:2017-12-21 14:01:26

标签: javascript jquery

我有一些a元素通过 javascript 运行功能,并设置#href但是我最近更改了一些导致这些功能的内容尝试重新加载页面而不是什么都不做,因此打破了他们的功能。

我能找到什么可能导致这种情况?

document.getElementById("link").onclick = function(){alert("do something javascript")};
<a id="link" href="#">Do Some JS</a>

Clicking this however reloads page and am unsure what i have done to cause this to reload the page.

我无法在片段中重现,如果我这样做,我不会问这个问题,但是有些东西导致这些链接重新加载页面,这不是预期的行为。

到目前为止,我只能思考或快速而肮脏的修复:

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

但我想知道可能导致此问题的原因。

问题

好的,我感谢您的帮助:

window.onpopstate = function(e){
    if(e.state !== null) { 
    } else {
        location.reload();
    }
}

那肯定会这样做。

我认为这是因为网页严重依赖于ajax,所以无法回到原来的位置。

我认为最简单的方法是更新ajax上的url更改,所以当我点击后,url会更改为上一个操作,然后导致页面在弹出状态更改时正确重新加载。

我的快速修复

我会将代码更改为:

window.onpopstate = function(e){
    if(e.state !== null) { 
    } else {
        if(window.location.href.substr(window.location.href.length - 1) != "#") {
            location.reload();
        }
    }
}

4 个答案:

答案 0 :(得分:3)

这是a代码的正常行为,如果您不希望他们重新加载您的网页或滚动到您的网页顶部,则应从href代码中移除a 。你也可以阻止他们像这样重新加载页面:

<a href="#" onclick="return false;">No reload</a>

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

答案 1 :(得分:1)

在您的功能中,您需要使用e.preventDefault()event.preventDefault()。例如:

function clickMe(e) {
   e.preventDefault();
}

根据最新评论,您需要将事件传递给函数,因此它看起来像这样:

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

请注意,这是一种我不推荐的方法,因为它会阻止所有链接,并可能导致比预期更多的问题。您将要使用特定的类来定位您的锚点。

答案 2 :(得分:0)

尝试javascript:void(0)而不是#

例如

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

因为没有看到一些代码,我们永远不知道导致这个问题的原因。

答案 3 :(得分:0)

尝试

<a onClick="callback();"></a>

只需删除该href =“”#“

它不会重新加载或刷新浏览器