javascript - e.preventDefault() 之后的链接不会加载，没有 jQuery

Question

我想在点击时加载一个链接，但它没有加载。我使用 preventDefault() 加载动画和 setTimeout()。我还应该使用什么？

我尝试return true，想把节点的路径链接保存在一个变量里，然后用location.href调用。但我不知道该怎么做。

<div class="content animated fadeInDown"> Table </div>

<td>
    <a class="link" href="./pizzerias/lazzaroni.html">See More</a>
</td>

<script>
let links = document.querySelectorAll('.link');

links.forEach((link)=>{
    link.addEventListener('click', (e)=>{

        e.preventDefault();
        let content = document.querySelector('.content');

        content.classList.remove('fadeInDown');
        content.classList.remove('animated');

        content.classList.add('fadeOutUp');
        content.classList.add('animated');

        setTimeout(500);
    });
});
</script>

Answer 1

preventDefault顾名思义。它可以防止事件的默认行为。

在链接的情况下，默认行为是将用户重定向到关联的 href 属性值。

您正在防止这种情况发生。所以它永远不会发生。 setTimeout 也没有执行任何操作。

如果你想在动画之后重定向用户，你需要明确地做:

links.forEach((link)=>{
    link.addEventListener('click', (e)=>{

        e.preventDefault();
        let content = document.querySelector('.content');

        content.classList.remove('fadeInDown');
        content.classList.remove('animated');

        content.classList.add('fadeOutUp');
        content.classList.add('animated');

        setTimeout(() => {
            window.location.href = e.target.href;
        }, 500);
});