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

Question

我有一些 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 将更改为上次操作，然后导致页面在 pop 状态更改时正确重新加载。

我的快速修复

我将代码更改为:

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

Answer 1

这是 a 标签的正常行为，如果您不希望它们重新加载您的页面或滚动到您的页面顶部，您应该从您的 中删除 href >a 标签。
你也可以像这样阻止它们重新加载你的页面:

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

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