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

Question

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

这个 jsfiddle 代码在桌面上可以正常工作，这是我转换后的代码（在 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;
        }
});

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

我究竟做错了什么？请帮忙！

Answer 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);
   }

});