在捏合时运行js；在捏出时运行不同的js

Question

我正在尝试开发我设计的交互，其中 html 元素在捏合期间进行 y 缩放（高度缩放），以便元素的高度成为手势中涉及的两个手指之间的距离。 目前，我正在尝试监听夹点并发出警报，然后监听夹点并使用 jQuery 发出单独的警报。你知道怎么做吗？也许没有插件？

我尝试使用两个插件来做到这一点。更多关于第一次尝试，稍后。

第二次尝试的问题在于它说捏合就是捏合，甚至点击或单击都是捏合。

我的第二次尝试是在这个 JS Fiddle 中：http://jsfiddle.net/hnabM/1/

这是第二次尝试使用的代码：

//pinchZoom is the distance between the two fingers involved in the pinch
var pinchIn = null;
var dist = null;
$('.pinch').swipe({
    pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom){
        dist = null;
    },
    pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom){
        dist = null;
    },
    pinchStatus:function(event, phase, direction, distance, duration, fingerCount, pinchZoom){
        if(dist != null){
            if(dist > pinchZoom){
                pinchIn = true;
            }
            else{
                pinchIn = false;
            }
            dist = pinchZoom;
            if(pinchIn === true){
                console.log("pinching in");
            }
            else{
                console.log("pinching out");
            }
        }
        else{
            dist = pinchZoom;
        }
    },
    fingers:2,
    pinchThreshold:0
});

这是我的第一次尝试。我得到了它的工作，但是当我将它与我的网站结合起来时，它突然不起作用。

我第一次尝试这个时，我使用了 jQuery 版本的hammer.js (http://eightmedia.github.io/hammer.js/)——一个有点著名的用于监听多点触控手势的库。除了我需要它工作的站点之外，我成功地完成了它。这里它正在处理 .polaroid 类（图像），尝试捏住它们，它们会缩小，捏住它们会触发警报：http://goo.gl/oOQDH0。但是，当我在站点中应用相同的确切 js 时，我需要它工作的站点，它突然不起作用。所有依赖项都在那里。没有错误。出于某种原因，滚动也受到了一定程度的抑制（在触摸设备上很难做到）。它与应用于 .dataCard 类（标题下的白色矩形）的代码完全相同，但无法正常工作：http://goo.gl/dagKxT

我将非常非常感谢在开发和运行这种交互方面的任何和所有帮助。 提前致谢！

Answer 1

不是要解雇或阻止您这样做，但是您自己写这篇文章有什么特别的原因吗？

无论如何，看看hammer.js https://github.com/EightMedia/hammer.js

它支持/模拟许多常见的触摸手势。包括捏缩放。它在他们的示例页面上：

https://github.com/EightMedia/hammer.js/blob/master/examples/pinchzoom.html

您可能已经完成了研究并看到了很多这样的库，但是 Hammer 的代码库布局非常好并且很容易理解。

如果您要从头开始尝试，您可能最终会在开始时检测到一个手势并用一个通用标志将其锁定（因此其他手势不会启动），然后在手势完成。