vue移动端 滚动 鼠标按下效果

class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)" @touchend="touchend(item.RowID)" v-for="(item,index) in dataList" :key="item.RowID" @click.stop="onview(item.RowID)">
***

    touchstart(id){
      document.getElementById(id).classList.add('item-touch');
      // console.log('touchstart');
    },
    touchend(id){
      // console.log('touchend');
      document.getElementById(id).classList.remove('item-touch');
    },

.item {
  margin: 5px;
  border-radius: 10px;
  background: white;
  border-style: ridge;
  border-width: 2px;
  border-color: white;
  border-left-style: none;
  border-right-style: none;
  
  &.item-touch{
    background: #eeeeee;
  }
}

 

 

//添加点击效果

    function FunDJXG(o) {
        o.on("touchstart", function () {
            $(this).addClass("clickResponse");
        });
        o.on("touchend", function () {
            $(this).removeClass("clickResponse");
        });
    },

 

js调用：

    //添加点击效果
    var clickResp = $(".jia,.jian,.Car_Area,.History");
    FunDJXG(clickResp);

 

样式css:

.clickResponse { background-color: #227dc3; opacity: 0.5; }

转载于:https://www.cnblogs.com/GarsonZhang/p/10521267.html