防止在移动滚动上执行jQuery函数

时间:2017-05-17 13:33:56

标签: javascript jquery ios iphone

在我的网站中,我有一个用户可以上传头像的组件。将头像拖入占位符或通过文件输入添加时,将显示图像的预览。此外,还会出现带有工具的小型叠加层,以便裁剪,缩放或旋转图像。

这一切都很好,通过桌面浏览器没有任何问题,但当我开始通过iPhone(iOS)在我的窗口滚动时出现问题。以某种方式执行该功能,并以某种方式重置裁剪和缩放的图像坐标。当我用非常小的跃点滚动时,似乎没问题。

我正在使用的库是jQcrop,我将这个包装到一个函数中,我在占位符更改时初始化。

例如;

function cropFrame(debugMsg) {
     console.log(debugMsg);
     $('img.cropImage').jQcrop({
         width: 175,
         height: 175,
         zoom : 60
      }).on('crop.jQcrop', function(e, data) {
         console.log('cropping');
         $('#avatarX').val(data.cropX);
         $('#avatarY').val(data.cropY);
         $('#avatarH').val(data.cropH);
         $('#avatarW').val(data.cropW);
      });
}

$('#upload').on('drop', function (e) {
    ..// code for dropped image
    cropFrame('On avatar drop change');
});

$(document).on('change', '#avatar', function(e) {
  ..// code for changed image
  setCropFrame('On avatar change');
});

通过Safari调试我的iPhone时所看到的,'裁剪'即使我没有触摸img.cropImage,控制台日志也会触发。

有什么想法吗?

0 个答案:

没有答案