本文教你如何在实现自定义页面过渡动画时，精准排除外部链接和新窗口链接，避免 `e.preventdefault()` 和跳转逻辑误作用于 `target="_blank` 或跨域链接，确保用户体验与语义正确性。
在为网站添加平滑的 Vanilla JS 页面过渡效果时，一个常见且关键的需求是：仅对站内导航启用过渡动画，而对所有外部链接（如 https://google.com）、新窗口链接（target="_blank"）或非 HTTP(S) 协议链接（如 mailto:、tel:）保持原生行为。你当前的代码通过 document.querySelectorAll('a') 绑定了全部 标签，导致即使点击 target="_blank" 的外部链接，也会被 e.preventDefault() 阻止并强制执行过渡后跳转——这不仅违背了用户预期，还可能造成安全与可访问性问题。
✅ 正确做法是：在事件绑定前，主动过滤掉不应触发过渡的链接。推荐采用以下双重校验策略：
1. 使用 CSS 选择器排除显式声明的外部行为
利用 :not() 伪类，在获取元素时直接剔除 target="_blank" 的链接：
const anchors = document.querySelectorAll('a:not([target="_blank"]):not([href^="mailto:"]):not([href^="tel:"]):not([href^="javascript:"])');该选择器一次性排除了新窗口外链、邮件、电话及脚本链接，简洁高效。
2. 运行时校验链接是否为同源内部地址
即便链接未设 target="_blank"，仍需判断其是否真正指向本站（防止恶意 href="//evil.com" 或绝对路径外链）。可在事件处理中加入域名/协议检查：
function isInternalLink(href) {
try {
const url = new URL(href, window.location.origin);
return url.origin === window.location.origin;
} catch (e) {
// 无效 URL（如 #top、/about）视为内部链接
return href.startsWith('#') || href.startsWith('/') || href.startsWith('.');
}
}✅ 整合后的健壮实现
window.addEventListener('load', () => {
const transitionEl = document.querySelector('.transition');
const anchors = document.querySelectorAll(
'a:not([target="_blank"]):not([href^="mailto:"]):not([href^="tel:"]):not([href^="javascript:"])'
);
// 初始隐藏过渡层
setTimeout(() => transitionEl.classList.remove('is-active'), 350);
anchors.forEach(anchor => {
anchor.addEventListener('click', e => {
const href = getLink(e);
if (!href || !isInternalLink(href)) return; // 跳过非内部链接
e.preventDefault();
transitionEl.classList.add('is-active');
// 注意：使用 setTimeout 替代 setInterval（原代码逻辑有误）
setTimeout(() => {
window.location.href = href;
}, 350);
});
});
});
function getLink(e) {
if (e.target.hasAttribute('href')) return e.target.href;
let parent = e.target.parentNode;
while (parent && parent.nodeType === Node.ELEMENT_NODE) {
if (parent.hasAttribute('href')) return parent.href;
parent = parent.parentNode;
}
return null;
}
function isInternalLink(href) {
try {
const url = new URL(href, window.location.origin);
return url.origin === window.location.origin;
} catch {
return href.startsWith('#') || href.startsWith('/') || href.startsWith('.');
}
}⚠️ 重要注意事项：
- ❌ 避免使用 setInterval 触发跳转（如原代码），它会导致多次执行；应使用单次 setTimeout。
- ? target="_blank" 并不等价于“外部链接”，但它是明确的用户意图信号（新开页），必须尊重。
- ? 同源判断必须使用 URL 构造函数 + origin 比较，不可仅靠 href.indexOf('http') === -1 等简单字符串匹配。
- ✨ 若需支持更精细控制（如为特定 class 如 .no-transition 排除），可扩展选择器：a:not(.no-transition):not([target="_blank"])。
通过以上方案，你的页面过渡将智能、可靠且符合 Web 最佳实践——内部导航享受动画，外部链接保持原生、安全、可预测的行为。
