尝试在 iOS 中通过 HammerJS 调整图像大小不起作用答案

【问题标题】：Try to resize image by HammerJS in iOS not work尝试在 iOS 中通过 HammerJS 调整图像大小不起作用
【发布时间】：2013-08-22 03:06:59
【问题描述】：

我尝试通过 Hammer.js 手势在 iOS 上调整图像大小。

This jsfiddle code 在桌面上工作正常，这是我的转换后的代码（在 iOS safari 上运行）

var startX,startY,startW,startH;
var canResize = false;

$('img').hammer().on("touch", function(events) {
    canResize = true;
    var e = events[0];
    startX = e.pageX;
    startY = e.pageY;
    startW = $(this).innerWidth();
    startH = $(this).innerHeight();
    return false;
});

$('img').hammer().on("release", function(events) {
    canResize = false;
    return false;
});

$('img').hammer().on("drag", function(events) {
        var e = events[0];
        if (canResize == true) {
            $(this).innerWidth(startW + e.pageX-startX);
            $(this).innerHeight(startH + e.pageY-startY);
        }
});

另一个尝试代码：

var canResize = false;
$('img').hammer().on("touch", function(events) {
    canResize = true;
    return false;
});

$('img').hammer().on("release", function(events) {
    canResize = false;
    return false;
});

$('img').hammer().on("drag", function(events) {
        if (canResize == true) {
            $(this).innerWidth += deltaX;
            $(this).innerHeight += deltaY;
        }
});

事件被触发，但调整大小不起作用。

我做错了什么？请帮忙！

【问题讨论】：

标签： javascript jquery hammer.js

【解决方案1】：

几天后，我意识到 Hammer JS 与 iOS 不兼容。我使用 jQuery touch 代替

$("document").ready(function() {
   var imgArray = $('img');
   for (var i = 0; i < imgArray.length; i++) {
       var startX,startY,startW,startH;
       var canResize = false;

       var image = imgArray[i];
       image.addEventListener('touchstart', function(e) {
           e.preventDefault();
           canResize = true;
           var touch = e.touches[0];
            startX = touch.pageX;
            startY = touch.pageY;
            startW = $(this).innerWidth();
            startH = $(this).innerHeight();
       }, false);

       image.addEventListener('touchend', function(e) {
           e.preventDefault();
           canResize = false;
       }, false);

       image.addEventListener('touchmove', function(e) {
           e.preventDefault();
           var touch = e.touches[0];
            if (canResize == true) {
                $(this).innerWidth(startW + touch.pageX-startX);
                $(this).innerHeight(startH + touch.pageY-startY);
            }

       }, false);
   }

});

【讨论】：