带有 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 将更改为最后一个操作，然后导致页面在弹出状态更改时正确重新加载。

我的快速修复

我将代码更改为：

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>

Answer 2

尝试javascript:void(0)改为#

例如。

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

因为如果没有看到一些代码，我们永远不知道是什么原因导致了这个问题。