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

jw5wzhpr  于 2022-12-28  发布在  Java
关注(0)|答案(9)|浏览(188)

我正在开发一个web应用程序,它是一个传统的aspx(ASP.NET)web表单应用程序,但是已经整合了一些有Angular 的应用程序。
我的任务是修复一个错误,该错误导致浏览器在单击带有href="#"的锚元素时刷新。
我不确定是什么原因导致整个页面重新加载。
奇怪的是,当我在Chrome中打开开发工具时,选择网络选项卡,然后选择禁用缓存,页面只在我第一次点击链接时刷新,之后的任何点击都正常。这可能是因为我第一次点击链接后,浏览器的网址末尾现在包含了#。
我知道这看起来有点随机,但我想知道是否有人有任何理论,什么可能导致重新加载摆在首位。

vwoqyblh

vwoqyblh1#

如果没有看到任何代码,很难判断是什么原因导致了这种情况。当我遇到这种情况时,我使用的最常用的解决方案是防止默认设置。

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

或者,如果你已经有了一个click事件,那么把$event作为一个参数传递给你的函数,然后在你正在调用的函数中使用preventDefault。
超文本标记语言

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

在你的TS里

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

tcbh2hod2#

这个答案和问题有关,而且是谷歌上出现的第一个答案,所以我希望这个答案有用。
我有一些外部网络组件使用常规的锚标签,带有指向我的angular应用中的路线的href。点击href会导致整个页面重新加载。这是因为我没有使用routerLink --但在我的情况下,我不能。
所以,我的工作是:

@HostListener('window:click', ['$event'])
  onClick(e: any) {
    const path = e.composedPath() as Array<any>;
    const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
    if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
      const href = firstAnchor.getAttribute('href');

      this.router.navigateByUrl(href);

      e.preventDefault();
    }
  }

根据您的应用程序,您可能需要进行一些其他检查,例如是否为target _blank,是否为外部URL等。

4dbbbstv

4dbbbstv3#

更改你的a标签代码如下

<a href="javascript:void(0);" (click)="yourClickEvent();">A Tag</a>

这将调用您的ClickEvent();无页面重载

检查此处的堆栈 lightning 战stackblitz

uklbhaso

uklbhaso4#

如果您不想重新加载页面,请使用$event.preventDefault()

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

zbwhf8kr5#

尝试使用调试工具选择元素,然后单击事件侦听器,再单击Click事件以查看侦听的内容。也许您可以通过这种方式跟踪它。
您还可以简单地将其粘贴到控制台中以触发中断,然后单击任何有问题的元素:

['unload', 'beforeunload'].forEach(function (evName) {
    window.addEventListener(evName, function () {
        debugger; // Chance to check everything right before the redirect occurs
    });
});

来源:Break when window.location changes?

70gysomp

70gysomp6#

使用Angular 布线时,请尝试使用以下符号:第一个月
正如这条评论所解释的:https://stackoverflow.com/a/38159597/4916355

34gzjxbg

34gzjxbg7#

请使用href=“javascript:无效(0);“
您希望使用链接的href来执行此操作的原因是,通常情况下,javascript:URL会将浏览器重定向到JavaScript求值结果的纯文本版本,但如果结果未定义,浏览器将停留在同一页面。void(0)只是一个简短的脚本,求值结果为undefined。

rekjcdws

rekjcdws8#

使用[routerLink]而不是href = "",并使用click事件调用您在typescript文件中的调用方法。
例如:
//根据文件名下载文件

<a [routerLink]="'file://' + 'path'" (click)="downloadFile(templateDocument.fileName)">{{downloadDocuments.fileName}}</a>
gt0wga4j

gt0wga4j9#

既然您提到Web应用程序是asp.net webforms,您能否告知我们
1.链接是否为asp.net超链接控件。如果是,AutoEventWireUp可能导致自动提交链接:请查看this链接
1.如果页面上确实有asp.net服务器控件,则可以通过设置
@页面自动事件连接=“假”
1.对于整个项目,可以通过在web.config中设置来禁用:

相关问题