Pinch事件触发Hammer.js中的pan事件

时间:2015-09-29 10:21:15

标签: javascript events hammer.js pan pinch

我正在使用Hammer.js库编写一个小型移动手势rocognizer。 不幸的是,当用户捏入或捏出时,Hammer,js也会触发一些泛事件。

我认为这是因为,在捏合手势期间,用户的手指会进行一点摇动。

有一种方法可以让Hammer.js在捏合时忽略小盘运动吗?

老实说,Hammer.js文档对此并不清楚。

这是我的代码:

                    hammer = new Hammer.Manager(myelement);
                var singleTap = new Hammer.Tap({
                    event: 'tap',
                });

                var doubleTap = new Hammer.Tap({
                    event: 'doubletap',
                    taps: 2
                });

                // SWIPE RECOGNIZERS

                var swipeLeft = new Hammer.Swipe({
                    event: 'swipeleft',
                    direction: 2
                });

                var swipeRight = new Hammer.Swipe({
                    event: 'swiperight',
                    direction: 4
                });

                var swipeUp = new Hammer.Swipe({
                    event: 'swipeup',
                    direction: 8
                });

                var swipeDown = new Hammer.Swipe({
                    event: 'swipedown',
                    direction: 16
                });


                // PINCH RECOGNIZERS
                var pinch = new Hammer.Pinch({
                    event: 'pinch',
                    pointers: 2
                });

                var pinchIn = new Hammer.Pinch({
                    event: 'pinchin',
                    pointers: 2,
                });

                var pinchOut = new Hammer.Pinch({
                    event: 'pinchout',
                    pointers: 2,
                });

                // PRESS RECOGNIZER
                var press = new Hammer.Press({
                    event: 'press',
                    pointers: 1,
                    threshold: 5,
                    time: 500
                });

                // PAN RECOGNIZER
                var pan = new Hammer.Pan({
                    event: 'pan',
                    pointers: 0
                });

                // ROTATE EVENTS RECOGNIZERS

                var rotateStart = new Hammer.Rotate({
                    event: 'rotatestart',
                    pointers: 2,
                    threshold: 0
                });

                var rotateEnd = new Hammer.Rotate({
                    event: 'rotateennd',
                    pointers: 2,
                    threshold: 0
                });

                var rotateCancel = new Hammer.Rotate({
                    event: 'rotatecancel',
                    pointers: 2,
                    threshold: 0
                });

                // ADDING RECOGNIZERS TO HAMMER 
                hammer.add([doubleTap, singleTap]);

                hammer.add([swipeDown, swipeUp, swipeRight, swipeLeft]);

                hammer.add([pan]);

                hammer.add([pinch]);
                hammer.add([press]);

                hammer.add([rotateStart, rotateEnd, rotateCancel]);

                pinchIn.recognizeWith([pan]);
                pinchOut.recognizeWith([pan]);
                pan.requireFailure([pinchIn, pinchOut]);

                // BEHAVIOUR ON TAP
                doubleTap.recognizeWith(singleTap);

                // DOUBLE/TRIPLE TAP RECOGNIZERS EXCLUSION
                singleTap.requireFailure([doubleTap]);

                //Binding Hammer's events with hammerHandler
                hammer.on("tap doubletap press rotatestart rotateend rotatecancel swipeleft swiperight swipeup swipedown pan pinch", function (event) {
                    hammerHandler(event);
                });

2 个答案:

答案 0 :(得分:0)

我刚刚处理同样的问题,结果是默认情况下禁用了pinch。您必须像这样启用它:

hammer.get('pinch').set({enable:true});

尝试在第一行之后添加,并希望您应该看到报告的夹点事件。

来源:http://hammerjs.github.io/getting-started/

答案 1 :(得分:0)

如果只用一根手指平移,那么检查2根手指...

hammertime.on('panend', function(e) {
    if(e.maxPointers > 1) { return; }
})