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

不念不忘少年蓝@ 2022-03-07 06:34 405阅读 0赞

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][https_blog.csdn.net_qq_32262127_article_details_79098673]

[https_blog.csdn.net_qq_32262127_article_details_79098673]: https://blog.csdn.net/qq_32262127/article/details/79098673