zoukankan      html  css  js  c++  java
  • vue2.0 v-tap简洁(漏)版 (只解决300ms问题)

    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 id="test"  v-tap="{method:test,params:some}">
    
    
    var vm= new Vue({
        el:"#test",
       data:{
           some:"ok!" 
       }, 
       method:{
          test:function(ee){
              console.log(ee)
          } 
        } 
    })
  • 相关阅读:
    JavaScript中的数组
    JavaScript中的对象
    Highcharts中设置x轴为时间的写法
    CSS 选择器(基础)
    DOM节点
    平衡木蜻蜓
    python2.7 qt4
    C语言优先级
    树莓派与stm32通信
    linux下USB转串口配置
  • 原文地址:https://www.cnblogs.com/JRliu/p/5972068.html
Copyright © 2011-2022 走看看