Question

我正在使用Cordova构建一个Android Web应用程序。在应用程序中，有一些按钮。当我使用:active伪类设置按钮的活动状态时，效果会延迟一点。这是一个示例：

button {
  padding:    10px;
  border:     none;
  outline:    none;
  color:      #FFF;
  background: #333;
}

button:active {
  background: #AAA;
}

<button>Hello</button>

从chrome开发人员工具中，选择“切换设备工具栏”按钮（带有手机图标的按钮）。效果也出现在这里。轻按按钮时，不会立即发生颜色变化。

我尝试使用onTouchStart和onTouchEnd手动执行此操作，但这还有另一个问题：在滚动时，按钮也会更改颜色，而不会更改。这是我的意思：

var btns = document.querySelectorAll("button");
for(var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("touchstart", function() {
    this.classList.add("active");
  });
  btns[i].addEventListener("touchend", function() {
    this.classList.remove("active");
  });
}

.btn-wrapper {
  width:      300px;
  height:     300px;
  overflow-y: auto;
}

button {
  display:    block;
  width:      100%;
  padding:    10px;
  border:     none;
  outline:    none;
  color:      #FFF;
  background: #333;
}

button.active {
  background: #AAA;
}

<div class="btn-wrapper">
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
  <button>Hello</button>
</div>

如何避免在滚动时改变按钮的颜色，同时使它们在触摸时立即改变颜色？

：active伪类在Android WebView中延迟了一段时间

0 个答案: