CSS去除移动端点击时元素产生的背景色「推荐」-猿码集

1. 引言

在移动端开发中，我们经常会遇到一些点击事件响应不灵敏的问题，这主要是由于移动设备会在点击元素时添加一个默认的背景色，导致用户感觉点击不流畅。这个背景色在绝大多数情况下是不需要的，所以我们需要去除它。

在移动设备中，当用户点击一个元素时，移动设备会自动给这个元素添加一个背景色。这个背景色的目的是用来提高用户的点击体验，让用户能更好地感知到他们点击的位置。不过，在大多数情况下，这个背景色是多余的，会影响用户的体验。

这个背景色是由 CSS 伪类 ":active" 产生的。当用户点击一个元素时，该元素会处于 ":active" 状态，此时会显示出 ":active" 伪类样式，即默认背景色。


button:active {
    background-color: #cccccc;
}

在移动设备中，去除默认背景色有多种方法。

通过设置 ":active" 状态下的元素背景色为透明，可以达到去除默认背景色的目的，这种方法相对简单，适用范围较广。


button:active {
    background-color: transparent;
}

值得注意的是，如果元素本身就有背景色，则需要保持元素原有的背景色，否则其点击区域可能会变得不可见。

通过禁用默认背景效果，可以完全去除移动设备点击时的默认样式，这种方法需要搭配禁止用户选择来使用，防止在长按元素时出现文本选择框。


button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    user-select: none;
}

其中，"-webkit-tap-highlight-color: rgba(0,0,0,0);" 是用来禁用默认背景效果的，"-webkit-user-select: none;user-select: none;" 是用来禁止选择的。

如果你想使用 JavaScript 来禁用默认点击效果，可以在元素被点击时，通过 JS 动态地禁用默认效果。


document.addEventListener('touchstart', function(e){
    e.preventDefault();
}, {passive: false});

这个代码段会在触摸事件开始时，禁止事件默认行为，即禁用了默认点击效果。

移动设备上的默认点击效果可以让用户更好地感知到他们的操作，但在许多情况下是多余的。通过设置元素的 ":active" 状态下的背景色，禁用选择或通过 JavaScript 这些方式可以去除这个默认点击效果。你可以根据你的实际需要选择合适的方式，提高用户的体验。