touch按钮颜色变换

css:

a,a:hover, a:focus{ text-decoration:none;}

.formBtn{ width: 85%; display:block; margin:3.2rem auto;}

.yBut{ height:4rem; background:#1890FF; font-size: 1.6rem; text-align: center;  line-height:4rem;

html :

<a class="yBut formBtn touchBtn" href="#">下一步</a>

JS:

//touch 变化 
/* btn 类名或者id名
 * bg  touchstart背景颜色
 * color  touchstart字体颜色
 * endBg  touchend 背景颜色
 * endColor touchend字体颜色
 */
function touchBtn(btn,bg,color,endBg,endColor){
var content = document.querySelectorAll(btn); 
for(var i = 0; i<content.length; i++){
if(content[i]){
content[i].addEventListener("touchstart",function (){
this.style.background = bg; 
this.style.color = color; 
});
content[i].addEventListener("touchmove",function (){
this.style.background = bg; 
this.style.color = color; 
});
content[i].addEventListener("touchend",function (){
this.style.background = endBg; 
this.style.color = endColor;
});
}
}

}

$(function(){

    touchBtn('.touchBtn',"#1462AB","#fff","#157BD8");

})