为什么 JavaScript event.preventDefault() 不起作用？

Question

我有一个用于锚标记的 JavaScript 函数，其中包含 preventDefault()。但是，该功能似乎只是延迟而不是阻止它。

此功能的目的是使用 Ajax 在网站内导航，这样当我单击内部链接时页面不会刷新。

当网站没有 CSS 时，这似乎按预期工作，但是当我添加 CSS 时，当我单击内部链接从页面 A 转到页面 B 时会发生这种情况：

1. 页面 B 已正确加载所有 HTML 和 CSS 内容，并且 URL 也通过 Ajax 方法更改。
2. 然后页面刷新以仅显示以前存在但没有 CSS 样式的 HTML 内容。
3. CSS 样式终于出现了。

我认为这可能是因为 preventDefault() 只是延迟了“a”标签的操作，而不是完全禁用它。

有什么办法可以解决吗？

下面是代码：

const navigatePage = () => {
    event.preventDefault();
    const a = new XMLHttpRequest();
    const b = event.target.pathname;
    a.open('GET', b, true);
    a.onprogress = () => document.getElementsByTagName('body')[0].innerHTML = "Loading..";
    a.onload = () => {
        if (a.status == 200) {
            window.location.pathname = b;
            document.getElementsByTagName('title')[0].textContent = new DOMParser().parseFromString(a.responseText, "text/html").head.childNodes[7].innerHTML;
            document.getElementsByTagName('body')[0].innerHTML = new DOMParser().parseFromString(a.responseText, "text/html").body.innerHTML;
        }
    }
    a.onerror = () => console.log('Error occured!');
    a.send();
}

:root {
--main-color:red;
--secondary-color:pink;
--dark-color:#444;
--light-color:#fafafa;
--max-width:1000px;
}
*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;color:var(--dark-color);}
body {
font-family: 'Montserrat', sans-serif;
background-color:var(--light-color);
color:var(--dark-color);
display: grid;
place-items: center;
font-size: 20px;
}
header{width:100%;display:flex;flex-wrap: wrap;align-items: center;justify-content:space-between;}
header img {height: 70px; width: 270px;}

.max-width{width: clamp(0px,var(--max-width),90%);}

<div class="max-width">
        <header>
    <div><a href='/'><img src='logo-title.svg' alt="logo" /></a></div>
    <nav>
        <a href='/' onclick="navigatePage()">Home</a>
        <a href='about' onclick="navigatePage()">About</a>
        <a href='contact' onclick="navigatePage()">Contact</a>
    </nav>
</header>
        <h1>Home Page</h1>
        <p>There are 2 other pages with a different lorem ipsums and with h1 tags that say "About Page" and "Contact Page" respectively</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo rhoncus odio, nec interdum metus
            dignissim non.
            Nullam vel felis vel dolor finibus venenatis ac non quam. Donec sagittis sed libero vel aliquet. Ut finibus
            leo
            neque,
            quis consequat elit dictum at. Donec finibus tincidunt mauris ut ullamcorper. Sed bibendum viverra ante,
            eget
            pretium
            lectus porta sit amet. Mauris eget maximus nulla, at tempus odio. Nullam efficitur odio diam, et finibus
            sapien
            congue
            eu. Aenean luctus aliquet bibendum. Etiam erat erat, tincidunt feugiat felis at, mollis varius justo. Aenean
            dolor nisi,
            consequat vitae lacinia et, ullamcorper quis felis. Donec suscipit magna id urna interdum, ac pharetra arcu
            iaculis.
            Nulla et tristique neque, in auctor ipsum. Sed egestas, diam at ultricies blandit, enim nisl volutpat urna,
            eu
            dapibus
            elit massa ut nulla.</p>
    </div>

Answer 1

尝试将“事件”作为参数传递

const navigatePage = (event) => {
  event.preventDefault();
  // ... your code
}