解决触屏长按按钮后:active伪类持续生效的问题

开发触屏应用的按钮组件时遇到问题：用户长按按钮超过1秒后抬起手指，按钮会一直保持:active状态，想要禁用这个行为，让触屏交互和鼠标交互效果一致。

现有代码如下：

CSS代码 #

button {
    background: lightgray;
    width:200px;
    height:200px;
    user-select:none;
}

button:active {
    background: blue;
    color:white;
}

HTML代码 #

<button>Click me </button>

已经解决的两个问题：

• 长按无法触发onclick，改用onpointerup处理
• 长按弹出右键菜单的问题，已全局禁用，对应JS代码：

document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    }, false);

补充：项目基于Blazor框架。

优先方案：CSS优化触屏交互 #

通过CSS的touch-action和精准的伪类选择器来限制:active的触发：

button {
    background: lightgray;
    width:200px;
    height:200px;
    user-select:none;
    /* 禁用触屏默认的长按、缩放等行为，只允许基础操作 */
    touch-action: manipulation;
}

/* 仅在非hover状态下触发:active，避免长按后残留的hover导致:active持续生效 */
button:active:not(:hover) {
    background: blue;
    color:white;
}

touch-action: manipulation会告诉浏览器，该元素只支持点击、滑动这类操作，直接禁用长按触发的默认行为（比如文本选择），同时配合:active:not(:hover)，可以过滤掉长按后可能保留的hover状态导致的:active残留。

备选方案：原生JS精准控制状态 #

如果CSS方案达不到预期，用JS监听指针事件来手动管理按钮状态：

document.querySelectorAll('button').forEach(btn => {
    let pressTimer;
    let isLongPress = false;

    btn.addEventListener('pointerdown', () => {
        // 1秒后标记为长按
        pressTimer = setTimeout(() => {
            isLongPress = true;
        }, 1000);
    });

    btn.addEventListener('pointerup', () => {
        clearTimeout(pressTimer);
        // 长按抬起时，强制移除:active状态
        if (isLongPress) {
            btn.blur();
            isLongPress = false;
        }
    });

    // 指针离开按钮时重置状态
    btn.addEventListener('pointerleave', () => {
        clearTimeout(pressTimer);
        isLongPress = false;
    });
});

在Blazor项目中，可将这段代码放在wwwroot/js下的自定义JS文件中，通过IJSRuntime调用，或者在组件的OnAfterRenderAsync生命周期方法中注入执行。

这样就能实现：长按超过1秒后抬起手指，按钮不会保持:active状态，和鼠标交互逻辑完全一致。

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