javascript - hammer.js的pinch事件缩放图片时，pan事件会同时触发，导致图片移动，如何解决？

问题描述

问 题

注册事件代码如下：

initTouch: function(touchPad, img) {
    var self = this;
    var offx = 0, offy = 0;
    var scale = 1;
    var currScale;
    var startTime = '';

    function formatTransform(offx, offy, scale) {
        gOffx = offx;
        gOffy = offy;
        gScale = scale;
        var translate = 'translate3d(' + (offx + 'px,') + (offy + 'px,') + '0)',
            myScale = 'scale(' + scale + ')',
            rotate = main.getRotate(gRotate);
        var result = translate + ' ' + myScale;
        if(rotate){
            result += ' ' + rotate;
        }
        return result;
    }

    var mc = new Hammer.Manager(touchPad);
    mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })); 
    mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan')]);
    mc.on('panstart',function(ev){
        if(ev.target.nodeName.toLowerCase() != 'input'){
            ev.preventDefault();
        }
        if(ev.target.className.indexOf('j-area') > -1){
            $('.overlay,.tip-box').show();
        }
    });
    mc.on("panmove", function(ev){
        if(!ev.isFinal) {
            var currOffx = offx + ev.deltaX;
            var currOffy = offy + ev.deltaY;
            console.log('curroffx ' + currOffx + ' curroffy ' + currOffy);
            if(currOffx < -300){
                currOffx = -300;
            }
            if(currOffx > 300){
                currOffx = 300;
            }
            if(currOffy < -450){
                currOffy = -450;
            }
            if(currOffy > 230){
                currOffy = 230;
            }
            img.style.webkitTransform = formatTransform(currOffx, currOffy, scale);
        } 
    });
    mc.on('panend',function(ev){
        offx += ev.deltaX
        offy += ev.deltaY;
    });
    
    mc.on("pinchstart pinchmove", function(ev){
        if(typeof ev.scale != 'undefined') {
            currScale = ev.scale - 1 + scale;
            console.log('currScale ' + currScale)
            if(currScale<0.5){
                currScale = 0.5;
            }
            img.style.webkitTransform = formatTransform(offx, offy, currScale);
        }
    });

    mc.on('pinchend',function(ev){
        scale = currScale;
    });
}

解决方案

关掉.recognizeWith([mc.get('pan')])就好了

这篇关于javascript - hammer.js的pinch事件缩放图片时，pan事件会同时触发，导致图片移动，如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！