移动端浏览器模拟器中按钮点击后高亮残留问题修复

问题描述 #

在移动端浏览器模拟器中点击按钮后，按钮会持续保持高亮状态；而在桌面端浏览器中点击该按钮时，所有功能均正常运行。

相关代码示例 #

CSS 代码 #

.button-coontainer {
    display: flex;
    height: 90vh;
    justify-content: center;
    align-items: center;
}

.btn-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-link:hover {
    background-color: #0056b3;
}

.btn-link:active {
    background-color: #004080;
    transform: translateY(2px);
}

HTML 代码 #

<div class="button-coontainer">
    <a class="btn-link" style="-webkit-tap-highlight-color: transparent;">
        My button
    </a>
</div>

修复方法 #

原因分析 #

移动端浏览器中，点击可点击元素后会自动赋予:focus状态，且不会像桌面端那样自动失焦，导致按钮一直显示聚焦样式（也就是你看到的“持续高亮”）。

方案1：统一聚焦状态样式 #

修改CSS，给.btn-link添加:focus状态的样式，让它和默认状态一致，消除高亮：

.btn-link:focus {
    background-color: #007bff; /* 与默认背景色保持一致 */
    outline: none; /* 移除浏览器默认焦点轮廓，按需选择 */
}

方案2：区分键盘聚焦与点击聚焦（更友好） #

使用:focus-visible伪类，只在键盘导航聚焦时显示焦点提示，点击聚焦时恢复默认样式，兼顾可访问性：

/* 键盘聚焦时显示清晰的焦点轮廓 */
.btn-link:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}
/* 点击聚焦时恢复默认样式 */
.btn-link:focus:not(:focus-visible) {
    background-color: #007bff;
    outline: none;
}

方案3：JavaScript 强制失焦 #

给按钮添加点击事件，点击后主动移除焦点：

document.querySelector('.btn-link').addEventListener('click', function() {
    this.blur();
});

内容的提问来源于stack exchange，提问作者Данила Шкурин