Vue.directive('tap',{
    bind:function(el,binding){
        var startTx, startTy, endTx, endTy, startTime, endTime;

        el.addEventListener("touchstart",function(e){
            var touch=e.touches[0];
            startTx = touch.clientX;
            startTy = touch.clientY;
            startTime = +new Date()
        },false );

        el.addEventListener("touchend",function(e){
            endTime = +new Date()
            if (endTime - startTime > 300) {
                // 若点击事件过长,不执行回调
                return
            }
            var touch = e.changedTouches[0];
            endTx = touch.clientX;
            endTy = touch.clientY;
            if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6){
                // 若点击期间手机移动距离过长,不执行回调
                var method = binding.value.method;
                var params = binding.value.params;
                method(params);
            }
        },false);
    }
})
使用方法:在创建Vue实例前引入,栗子:
<div >


var vm= new Vue({
    el:"#test",
   data:{
       some:"ok!" 
   }, 
   method:{
      test:function(ee){
          console.log(ee)
      } 
    } 
})

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-08-09
  • 2021-12-22
  • 2022-12-23
  • 2022-12-23
  • 2021-09-11
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-06-05
  • 2022-12-23
  • 2021-11-13
  • 2022-12-23
  • 2022-01-08
相关资源
相似解决方案