javascript - 单击 anchor 元素时页面重新加载

Question

我正在开发一个 Web 应用程序，它是一个传统的 aspx (asp.net) Web 表单应用程序，但其中包含了一些 Angular 6 应用程序。

我的任务是修复一个在单击带有 href="#"的 anchor 元素时导致浏览器刷新的错误。

我不确定是什么导致整个页面重新加载。

奇怪的是，当我在 Chrome 中打开开发工具时，选择网络选项卡并选择禁用缓存页面仅在我第一次单击链接时刷新，任何其他后续单击都可以正常工作。这可能与我第一次单击它后浏览器 url 现在在其末尾包含 # 的事实有关。

我知道这似乎有点随机，但我想知道是否有人对可能导致重新加载的原因有任何理论。

Answer 1

在没有看到任何代码的情况下很难说出可能导致这种情况的原因。当我得到这种行为时，我使用的最常见的解决方案是防止默认值。你可以做类似的事情

<a href="#" (click)="$event.preventDefault()">

或者，如果您已经有一个单击事件，则将 $event 作为参数传递给您的函数，然后在您正在调用的函数中使用 preventDefault。这看起来像:

html

<a href="#" (click)="someFunc($event)">

在你的 ts 中:

someFunc(event) {
    event.preventDefault();
    // rest of your code here
}