如何阻止链接加载直至弹窗关闭？现有代码失效求助

核心问题排查 #

1. 事件绑定目标错误：你给<summary>元素绑定点击事件，但<summary>的默认行为是展开/折叠<details>组件，并非页面跳转。如果跳转链接是嵌套在<summary>内部的<a>标签，点击时触发的是<a>的默认跳转，你绑定在<summary>上的event.preventDefault()只能阻止summary的折叠/展开，无法拦截链接跳转。
2. 跳转地址获取无效：<summary>本身没有href属性，link.getAttribute("href")无法拿到有效的跳转目标地址。

修正步骤 #

1. 调整事件绑定目标

将点击事件绑定到实际的跳转链接（即<a>标签）上，而非<summary>。如果需要精准控制，可给目标链接添加统一类名（比如.nav-link）：

// 替换原选择器，绑定到summary内部的a标签
const navLinks = document.querySelectorAll("summary a");

2. 有效阻止链接跳转

绑定在<a>标签上的event.preventDefault()才能真正拦截默认跳转行为：

navLinks.forEach((link) => {
  link.addEventListener("click", (event) => {
    event.preventDefault(); // 此时可有效阻止a标签的默认跳转
    const linkHref = link.getAttribute("href"); // 正确获取跳转地址
    showPopup(linkHref);
  });
});

3. 修复弹窗按钮事件覆盖问题

原按钮上的onclick="closePopup()"会被showPopup里的新事件覆盖，改为先关闭弹窗再跳转的逻辑，同时避免重复绑定：

function showPopup(linkHref) {
  const popup = document.getElementById("popup");
  const acceptBtn = popup.querySelector(".popup-content button");
  
  // 清除之前的事件绑定，防止重复触发
  acceptBtn.removeEventListener("click", handleAccept);
  
  function handleAccept() {
    closePopup();
    window.location.href = linkHref;
  }
  
  acceptBtn.addEventListener("click", handleAccept);
  popup.style.display = "block";
}

4. 可选：阻止summary默认折叠/展开

如果不需要<summary>的原生折叠功能，可单独阻止其默认行为：

document.querySelectorAll("summary").forEach(summary => {
  summary.addEventListener("click", (e) => e.preventDefault());
});

完整修正代码 #

<body>
    <!-- Popup -->
    <div id="popup" class="popup">
        <div class="popup-content">
            <span class="close-button" onclick="closePopup()">&times;</span>
            <p>Este es un mensaje de confirmación antes de ir a otra sección.</p>
            <button>Aceptar</button>
        </div>
    </div>

    <!-- 示例导航结构 -->
    <details>
      <summary>
        <a href="/page1">页面1</a>
      </summary>
    </details>
    <details>
      <summary>
        <a href="/page2">页面2</a>
      </summary>
    </details>

    <script>
        function showPopup(linkHref) {
            const popup = document.getElementById("popup");
            const acceptBtn = popup.querySelector(".popup-content button");
            
            acceptBtn.removeEventListener("click", handleAccept);
            
            function handleAccept() {
                closePopup();
                window.location.href = linkHref;
            }
            
            acceptBtn.addEventListener("click", handleAccept);
            popup.style.display = "block";
        }
        
        function closePopup() {
            document.getElementById("popup").style.display = "none";
        }
        
        // 绑定到summary内部的a标签
        const navLinks = document.querySelectorAll("summary a");
        navLinks.forEach((link) => {
            link.addEventListener("click", (event) => {
                event.preventDefault();
                const linkHref = link.getAttribute("href");
                showPopup(linkHref);
            });
        });

        // 可选：阻止summary的默认折叠/展开
        document.querySelectorAll("summary").forEach(summary => {
            summary.addEventListener("click", (e) => e.preventDefault());
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Fabio Chirino Spades