如何用JavaScript在移动端点击内部按钮移除元素hover/focus状态

我实现了一个通过hover触发显示的Tooltip，桌面端运行正常，但在移动端需要点击.explanation元素外部才能移除其hover/focus状态以关闭Tooltip。我希望点击Tooltip内部的X按钮也能实现关闭功能，尝试了一段JavaScript代码但在Chrome移动端无效，请问如何解决移动端关闭元素hover状态的问题？

原始代码 #

HTML结构 #

<div class="main">
  <div>
    <h5>h5 text</h5>
    <div class="explanation">
      <div>
        <p>An explanatory paragraph <a>x</a></p>
      </div>
    </div>
  </div>
</div>

CSS代码 #

.main {
  .explanation {
    &::before {
      content: "[hover to show]";
    }

    p {
      background: #edf6ff;
      display: none;
      margin: 0;
      padding: 12px;
      position: relative;
      width: 200px;
      
      a {
        content: '[close]';
        outline: 5px solid blue;
        position: absolute;
        top: -5px;
        right: -20px;
      }
    }

    &:hover p {
      display: block;
    }
  }
}

尝试的JavaScript代码 #

const closeButton = document.querySelector(
    '.main .explanation p a'
);

const main = document.querySelector('.main');

closeButton.addEventListener('click', removeFocus, false);

function removeFocus(event) {
    main.blur();
    event.preventDefault();
}

问题原因 #

移动端浏览器会模拟hover状态：点击元素后会持续保持hover状态，直到点击其他元素。而你原来的代码中，main.blur()无效是因为.main默认不是可聚焦元素（没有tabindex属性），调用blur()不会有任何效果。另外，点击关闭按钮时事件可能冒泡到.explanation，导致hover状态无法正确移除。

解决方案 #

放弃纯CSS的:hover控制，改用JavaScript切换类名来管理Tooltip的显示/隐藏，同时兼顾桌面端和移动端的交互逻辑：

修改后的CSS代码 #

.main {
  .explanation {
    &::before {
      content: "[hover to show]";
    }

    p {
      background: #edf6ff;
      display: none;
      margin: 0;
      padding: 12px;
      position: relative;
      width: 200px;
      
      a {
        content: '[close]';
        outline: 5px solid blue;
        position: absolute;
        top: -5px;
        right: -20px;
        cursor: pointer; /* 增加点击光标提示 */
      }
    }

    /* 用.active类代替:hover控制显示 */
    &.active p {
      display: block;
    }
  }
}

修改后的JavaScript代码 #

const explanation = document.querySelector('.main .explanation');
const closeButton = document.querySelector('.main .explanation p a');

// 切换Tooltip显示/隐藏的核心函数
function toggleTooltip(e) {
  explanation.classList.toggle('active');
}

// 桌面端：hover事件控制
explanation.addEventListener('mouseenter', toggleTooltip);
explanation.addEventListener('mouseleave', toggleTooltip);

// 移动端：触摸事件控制，阻止默认行为避免触发点击冲突
explanation.addEventListener('touchstart', (e) => {
  e.preventDefault();
  toggleTooltip(e);
});

// 关闭按钮点击事件：移除active类，阻止事件冒泡避免触发父元素的触摸/点击事件
closeButton.addEventListener('click', (e) => {
  e.stopPropagation();
  explanation.classList.remove('active');
});

// 点击页面其他区域关闭Tooltip
document.addEventListener('click', (e) => {
  if (!explanation.contains(e.target)) {
    explanation.classList.remove('active');
  }
});

说明 #

• 用.active类替代:hover，让Tooltip的显示状态完全由JavaScript控制，避免移动端浏览器的hover模拟问题。
• 针对桌面端保留mouseenter/mouseleave事件，保持原有hover交互逻辑。
• 移动端使用touchstart事件，并阻止默认行为，避免触摸后触发点击事件导致状态混乱。
• 关闭按钮点击时阻止事件冒泡，防止触发父元素的状态切换逻辑。
• 添加页面点击事件，点击外部区域也能关闭Tooltip，提升用户体验。

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