aria-haspopup="true"不生效，触摸屏点击下拉导航链接仍跳转如何解决

首先明确：aria-haspopup是无障碍属性，仅用于向屏幕阅读器说明该元素可触发弹出菜单，原生没有阻止链接跳转的逻辑，你遇到的问题属于预期表现。

解决方案1：JavaScript实现首次点击展开、二次点击跳转（保留原链接跳转能力） #

直接给触发器绑定点击事件，通过状态变量控制是否阻止默认跳转行为，参考代码如下：

// 选中下拉触发器
const dropdownTrigger = document.querySelector('.navbar-dropdown a[aria-haspopup="true"]');
// 记录下拉展开状态
let dropdownOpened = false;

dropdownTrigger.addEventListener('click', function(e) {
  // 下拉未展开时，阻止跳转并展开下拉
  if (!dropdownOpened) {
    e.preventDefault();
    // 你的下拉展开逻辑，比如给父元素加激活类
    this.closest('.navbar-dropdown').classList.add('show');
    // 更新无障碍属性
    this.setAttribute('aria-expanded', 'true');
    dropdownOpened = true;

    // 点击页面其他区域关闭下拉，重置状态
    const closeOnOuterClick = (ev) => {
      if (!this.contains(ev.target)) {
        this.closest('.navbar-dropdown').classList.remove('show');
        this.setAttribute('aria-expanded', 'false');
        dropdownOpened = false;
        document.removeEventListener('click', closeOnOuterClick);
      }
    };
    document.addEventListener('click', closeOnOuterClick);
    return;
  }
  // 下拉已展开时，不做拦截，正常触发跳转
});

同时补充对应的CSS下拉展示逻辑即可：

.navbar-dropdown.show a:not([aria-haspopup="true"]) {
  /* 你的下拉展示样式 */
  display: block;
}

解决方案2：不需要保留跳转能力的简化方案 #

如果该触发链接本身不需要跳转功能，可以直接修改标签属性从根源避免跳转：

• 把<a>标签的href属性改为#或者javascript:void(0)
• 直接换成<button>标签作为触发器，语义更合理，原生没有跳转行为

无障碍补充建议 #

给触发器补充aria-expanded属性，下拉关闭时设为false，展开时设为true，和你已加的aria-haspopup搭配，符合无障碍规范。

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