自定义指令v-tap解决click事件延迟问题 vue

Vue.directive('tap',{
    bind:function(el,binding){
        let tapObj = {};
        let time;
        el.addEventListener('touchstart',function(e) {
            let touches = e.touches[0];
            tapObj.pageX = touches.pageX;
            tapObj.pageY = touches.pageY;
            tapObj.clientX = touches.clientX;
            tapObj.clientY = touches.clientY;
            time = +new Date();
        },false);

        el.addEventListener('touchend',function(e) {
            let touches = e.changedTouches[0];
            time = +new Date() - time;
            tapObj.distanceX = tapObj.pageX - touches.pageX;
            tapObj.distanceY = tapObj.pageY - touches.pageY;
            if (time < 150 && Math.abs(tapObj.distanceX) < 2 && Math.abs(tapObj.distanceY) < 2){
                e.preventDefault();
                el.exec();
            }
        },false);
        el.exec = function () {
            var data = binding.value;
            data[0].apply(this, data.slice(1));
        };
    },
    //更新页面
    componentUpdated : function(el,binding) {
        el.exec = function () {
            var data = binding.value;
            data[0].apply(this, data.slice(1));
        };
    },
    unbind: function (el) {
        el.exec = null;
    }
})

使用

<span class="fs32 all_edit" v-if="!noData"v-tap="[change_goods,'all']">{{editAll? "完成" : "编辑"}}</span>

https://blog.csdn.net/qq_32262127/article/details/79098673