移动端a标签链接失效求助：PC端正常，移动端无响应

核心问题分析 #

1. 导航栏Shop链接失效原因 #

你给.nav绑定了点击事件，原本逻辑是点击目标的href不是#就直接返回，不阻止跳转。但在移动端容易出现以下问题：

• 事件target判断偏差：如果.nav__link内部包含子元素（哪怕是不可见的），移动端点击时event.target可能命中子元素，此时getAttribute('href')拿不到有效值，不会触发return，反而执行了event.preventDefault()直接拦截跳转。
• 触摸事件冲突：部分移动端浏览器的触摸事件优先级高于click事件，若有其他JS处理了touchstart/touchend，可能干扰click事件的正常触发。

2. 地图板块外部链接失效原因 #

这个链接不在nav容器内，不受上述JS逻辑影响，失效大概率是CSS层叠问题：

• 移动端样式中，链接的父元素或上层元素被设置了pointer-events: none，导致点击事件无法穿透到a标签。
• 有定位元素（比如移动端导航遮罩、弹窗背景）覆盖在链接上方，即使设置了z-index，若父元素未设置position: relative/absolute/fixed，z-index也不会生效。

修复步骤 #

修复导航栏Shop链接 #

修改JS逻辑，仅处理带有data-scroll属性的内部跳转链接，外部链接直接放行：

document.querySelector('.nav').addEventListener("click", (event) => {
    // 精准获取点击的.nav__link元素，不受子元素干扰
    const targetLink = event.target.closest('.nav__link');
    // 只有带data-scroll的内部链接才执行平滑滚动逻辑
    if (!targetLink || !targetLink.hasAttribute('data-scroll')) {
        return;
    }
    
    event.preventDefault();
    const menuItems = document.querySelectorAll('.nav__link');
    // 移除所有导航项的active类
    menuItems.forEach(item => item.classList.remove('active'));
    
    const elementId = targetLink.getAttribute('data-scroll');
    if (elementId) {
        const scrollOffset = getElementScrollOffset(elementId);
        scrollToTop(scrollOffset);
        targetLink.classList.add('active');
    }
});

通过closest()方法精准定位到a标签，再通过data-scroll属性判断是否为内部跳转，彻底避免误拦截外部链接。

修复地图板块的外部链接 #

1. 强制开启点击事件，避免被上层元素的pointer-events属性影响：

.map__title a {
    pointer-events: auto !important;
    position: relative; /* 确保z-index生效 */
    z-index: 999;
}

2. 确保点击区域覆盖完整文本，给a标签添加块级显示属性：

.map__title a {
    display: inline-block;
}

额外排查建议 #

• 使用浏览器开发者工具的移动端模拟模式，查看元素的点击热区，确认链接的可点击区域是否正常显示。
• 检查是否有其他JS代码（比如移动端汉堡菜单逻辑）调用了event.stopPropagation()或event.preventDefault()，拦截了页面的点击事件。

内容的提问来源于stack exchange，提问作者spider5414