Css 即时按钮反馈

我正在用Cordova创建一个简单的移动应用程序。为了获得良好的用户体验，我希望每当用户按下按钮时都能得到即时反馈。这应该通过

：active

伪类来完成。它主要起作用，但不是很“即时”

看

• 毫无疑问，使用桌面Chrome，点击按钮会产生绝对即时的反馈
• 使用Chrome for Android，快速点击按钮感觉相当快，但缓慢点击或按住按钮会导致延迟（可能很难注意到，但它就在那里，让我感到不安）

我认为这与滚动有关。如果你进入安卓设置，会有一个选项滚动列表。这些选项似乎以类似的延迟突出显示。但是，任何不在滚动列表中的本机Android按钮都是绝对即时的（例如，右上角的“后退”按钮，或弹出对话框中的“保存/取消”）

有没有办法让Chrome相信这些按钮不在任何滚动窗格上，应该立即突出显示

这可能是不相关的，但我也注意到按住html按钮会突出显示它，但移动手指（仍在按钮内）会导致突出显示消失。这与本机Android按钮的行为不匹配，只要您停留在按钮内，这些按钮就会一直高亮显示

编辑：我应该添加

-webkit点击突出显示颜色

（仅适用于

光标：指针

）比

：active

快一点，但这不是一个可接受的解决方案，原因如下：

如果按住按钮一秒钟以上，高亮显示将消失

它与

：active

-若要使用

-webkit点击高亮显示颜色

，则必须删除

：active

，这毫无意义

无法控制高光的大小/形状，这可能与实际按钮不匹配（有时它会在边缘周围出血，或具有不匹配的圆角）

---

解决此问题的正确HTML方法是

：active

，如果可能的话，我想使用它。

解决此问题的最佳方法似乎是监听触摸事件并设置一个类：

$('button').on('touchstart', function(e){
    $(this).addClass('active');
});

$('button').on('touchend', function(e){
    $(this).removeClass('active');
});

为了使它与

：active

伪类保持密切的关系，我选择使用

active

类，并为这两个类添加样式：

button:active, button.active {
    // active style
}

有关详细信息，请参阅：