a标签点击后如何实现延迟跳转？

如何实现点击后延迟跳转？

在a标签点击后想要实现类似loading动画过渡再跳转页面的效果，可以使用javascript劫持。

代码示例：

<a href="https://www.baidu.com" target="_blank" onclick="onLinkClick" >这是个链接</a>

<script>
  const onLinkClick = function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 设置loading
    // ...
    const href = e.target.getAttribute('href');
    const openType = e.target.getAttribute('target');
    // 1秒后跳转
    setTimeout(() => {
      window.open(href, openType);
    }, 1000);
  }
</script>

登录后复制

在这个例子中，当点击链接时，会首先阻止默认跳转行为，然后执行自定义 JavaScript 代码。随后，加载一个简单的loading动画（可以根据需要自行定义）并设置一个1秒的延迟。1秒过后，将根据原始链接中的href和target属性打开新页面。

以上就是点击后如何实现延迟跳转？的详细内容，更多请关注米云其它相关文章！