在移动网络应用程序中单击更改按钮背景颜色

在我们的移动网络应用程序中，我们有一些输入按钮，默认背景色设置为红色。 现在点击按钮，我们想要将颜色更改为蓝色以显示一些活动。 只要按钮的预期onclick功能完成，该按钮应保持活动的背景色。 一旦onclick函数完成，背景颜色就会变回默认的红色。

我尝试了几个解决方案来实现上述行为。 但没有一个按预期工作。

1）由于在移动浏览器（iphone和android）中没有onmouseover事件，我使用onclick事件来更改按钮颜色。

<input type="button" id="validate" class="redButton"  value="Validate" onclick="handleOnClick(this);"/>;

function handleOnClick() {
       changeColor('blue');
       doSomething();    
       changeColor('red');
}

理想情况下，当用户点击按钮时，handleOnClick（）函数被调用，并且第一个按钮背景颜色应该变为蓝色，然后它应该调用doSomething（），最后它应该将颜色变回红色。 实际上，doSomething（）执行起来非常快，以至于用户看不到按钮颜色变化，并且它仍然是红色的。 在浏览器可以更改类并应用changeColor（'blue'）的新CSS样式之前，它会调用changeColor（'red'）。

2）我尝试了“ontouchstart”事件来改变背景颜色。 但是这种方法的问题在于，一旦你触摸按钮，然后将手指从按钮上移开，它仍然会触发ontouchstart，但不会触发onclick事件。

有没有其他方法可以更改移动浏览器按钮的颜色？ 谢谢。

---

最后花费太多时间后，我在下面的链接帮助下解决了按钮高亮问题：

为移动Web应用程序创建快速按钮

取消对IPHONE的WEBKIT ONCLICK DELAY

链接地址: http://www.djcxy.com/p/87665.html

上一篇: Change button background color on click in mobile web app

下一篇: How to change statusbarpanel background color in firefox extension