手机端页面的点击效果实现

前提

产品设计 UI 经常会在设计时设计手机点击效果，虽然只有这个一个效果，但是却让我感觉非常头疼。。

解决历程

首先说 手机端会有一个默认的样式，点击出现一个黑块，这个可以通过

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  or
  -webkit-tap-highlight-color: transparent;  

去掉黑块

我刚开始想的是添加一个点击效果，但是手机端点击会有延迟，并且在点击之后也不好处理，没有采用这个方案。

又想到 touchstart,touchend 之后切换class

$("button").on('touchstart touchend ',function(event){
        event.preventDefault()

        $("p").toggleClass("main");
});

但是在设置背景的时候就会出问题， 而且必须阻止事件冒泡

所以我最后考虑了 settimeout

$("button").on('touchstart',function(){
    ／／添加样式
    settimeout(function(){
        ／／消除掉样式
    },300)  
});

并且在页面层，我放了两个div position 重合在一起，然后点击消除，300毫秒后消失 这样可以防止样式切换造成的空白期。。