Jackmoore Zoom 1.7.15：通过双击在触摸设备上切换缩放

Posted 2023-05-07

【中文标题】Jackmoore Zoom 1.7.15：通过双击在触摸设备上切换缩放

【英文标题】：Jackmoore Zoom 1.7.15: Toggle zoom on touch device with double tap

【发布时间】：2016-11-02 06:24:15

【问题描述】：

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

我想在触控设备上双击来切换缩放效果。原因是我为图像使用的轮播（OWL Carousel）也具有滑动功能，并且 Zoom 通过触摸和拖动图像在触摸设备上工作，这与滑动冲突。

就像 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 这样的双击监听器可以解决问题。我现在已经设法让它识别双击，但不能启动缩放功能。

【问题讨论】：

当双击发生时，你不能只使用 $(hover container object).trigger("whatever the event is") 吗？假设： $(container).on("doubletap", function() this.trigger("hover/grab/etc") )

【参考方案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 毫秒是点击事件应该在其目标顶部调用点击的时间（在启用触摸的环境中使用的浏览器的通常行为）