HTML/CSS/JS汉堡菜单点击出现文本光标问题求助

数据老陈

2026-8-1

解决汉堡菜单点击出现文本光标问题

问题根源

点击汉堡菜单时，容器元素会获得焦点，浏览器默认会显示文本光标（或焦点轮廓），这就是你遇到的问题。

三种解决办法

办法1：用CSS直接禁用

给汉堡菜单容器加以下样式，从根源阻止文本选择和焦点光标：

.hamburger-menu {
  /* 禁止文本被选中 */
  user-select: none;
  /* 移除焦点时的轮廓（部分浏览器会显示这个而非光标） */
  outline: none;
  /* 鼠标移上去显示指针，让用户知道这是可点击元素 */
  cursor: pointer;
}

办法2：让元素无法被聚焦

给汉堡菜单的外层div加tabindex="-1"属性，让它不能获得焦点：

<div class="hamburger-menu" tabindex="-1">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

办法3：点击后主动取消焦点

修改JS代码，点击完成后让菜单容器失去焦点：

// 先给汉堡菜单绑定点击事件
const hamburger = document.querySelector('.hamburger-menu');
hamburger.addEventListener('click', function() {
  // 切换动画类
  document.querySelectorAll('.bar1, .bar2, .bar3').forEach(bar => bar.classList.toggle('animation'));
  // 移除焦点
  this.blur();
});