移动端 按钮按下时 颜色改变

html:

<button class="friend">确定</button>

css:

*{
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
button{
    width: 80%;
    height: 50px;
    background: #f66;
    border: 0;
    color: #fff;
    border-radius: 5px;
    font-size: 20px;
}

js:

$(".friend").on("touchstart", function() {
      $(this).css({opacity:0.8});
}).on("touchend", function() {
      $(this).css({opacity: 1});
});
$(".friend").on("click",function(){
      alert(0)
 })

效果： 按钮正常
按钮按下时