Jackmoore Zoom 1.7.15:通过双击切换触摸设备上的变焦

Question

使用Zoom by Jackmoore:http ://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

我想在触摸设备上使用双击来切换缩放效果.原因是我正在使用的旋转木马(OWL Carousel)用于图像也具有滑动功能,并且通过触摸和拖动图像在触摸设备上进行缩放,这与滑动冲突.

就像topman网站为移动设备做的那样:http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835？ bi = 0&PS = 20

这是JS文件的链接:https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

我可以通过双击非触摸设备来实现这一点:

if (settings.on === 'toggle') {
                $source.on('dblclick.zoom',
                    function (e) {
                        if (clicked) {
                            stop();
                        } else {
                            start(e);
                        }
                        clicked = !clicked;
                    }
                );

但需要调整触摸设置的代码,我相信改变这一部分:

// Touch fallback
            if (settings.touch) {
                $source
                    .on('touchstart.zoom', function (e) {
                        e.preventDefault();
                        if (touched) {
                            touched = false;
                            stop();
                        } else {
                            touched = true;
                            start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
                        }
                    })
                    .on('touchmove.zoom', function (e) {
                        e.preventDefault();
                        zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
                    })
                    .on('touchend.zoom', function (e) {
                        e.preventDefault();
                        if (touched) {
                            touched = false;
                            stop();
                        }
                    });
            }

也许添加像Touchy这样的双击监听器:https://github.com/yairEO/touchy可以做到这一点.我已经设法让它识别出现在的双击,但不是为了启动缩放功能.

Answer 1

您可以自己创建双击处理程序。您将需要一些东西来跟踪点击发生的速度。

在触摸端，您需要存储时间戳并了解过去了多少时间以及是否要将其视为双击。

var stateVar = new Date().getTime();
function fnRef(e){
    if(new Date().getTime() - stateVar < 300){
        e.preventDefault();
        // invoke logic here
    }
}

element.addEventListener("touchend", fnRef);

上面的内容应该适合您的编码风格和案例，但总的来说，这就是其背后的逻辑。

我之所以使用 300ms 作为比较值，是因为您需要阻止点击行为并在此时调用缩放。300 毫秒是点击事件应调用其目标顶部的点击的时间（在支持触摸的环境中使用的浏览器的通常行为）