jQuery触摸事件在iOS上无法使用

Question

我在iOS中使用jQuery触摸事件时遇到了问题。

以下是我已经完成的内容：

$(document).ready(function(){
        var iX = 0,iY = 0,fX = 0,fY = 0;

        document.addEventListener('touchstart', function(e) {

            var touch = e.touches[0];
            iX = touch.pageX;
            iY = touch.pageY;

        }, false);

        document.addEventListener('touchmove', function(e) {

            var touch = e.touches[0];
            fX = touch.pageX;
            fY = touch.pageY;

        }, false);

        document.addEventListener('touchcancel', function() {

            var dX = fX - iX;
            var dY = fY - iY;

            var tg = dY/dX;
            if(tg < 0) tg = -tg;

            if(tg <= 0.5 && fX > iX) rightSwipe()
            else if(tg <= 0.5 && fX < iX) leftSwipe()

        }, false);

        function rightSwipe(){
            $("#body").removeClass("bg2");
            $("#body").addClass("bg");
        }

        function leftSwipe(){
            $("#body").removeClass("bg");
            $("#body").addClass("bg2");
        }
});

当你触摸屏幕时，它会保存手指的位置。当你移动手指并释放时，它会保存最后一个手指位置。通过简单的几何计算，它可以发现你滑动的方向。

这个脚本在使用谷歌浏览器和安卓默认浏览器的Android 4.1.2上运行非常良好。但是在使用Safari的iOS上尝试时，它不起作用。

有人能帮忙吗？

- Maurício Giordano

Answer 1

我在iPad上的Mobile Safari中没有看到touchcancel事件。你是否尝试使用touchend代替？也许这样可以：

function upHandler(event) {

    var dX = fX - iX;
    var dY = fY - iY;

    var tg = dY / dX;
    if (tg < 0) tg = -tg;

    if (tg <= 0.5 && fX > iX) rightSwipe()
    else if (tg <= 0.5 && fX < iX) leftSwipe()
}

document.addEventListener('touchcancel', upHandler, false);
document.addEventListener('touchend', upHandler, false);

如果您使用jQuery，您可以将此内容替换为：

document.addEventListener('touchcancel', upHandler, false);
document.addEventListener('touchend', upHandler, false);

使用：

$(document).on('touchcancel, touchend', upHandler);

- Cymen

---

不对。我测试了，touchstart和touchmove都可以工作。但是touchcancel和touchend都不能工作。 - Maurício Giordano

我错过了你没有使用jQuery。我会更新我的答案。当使用jQuery时，它会为您执行诸如on之类的好操作。 - Cymen

谢谢！它有效了！ 你能用事件监听器和jQuery做一个例子吗？ - Maurício Giordano

@MaurícioGiordano 当然没问题 -- 我已经添加了一个如何使用jQuery的on方法的示例。 - Cymen

但是这样做，我怎么得到包含触摸位置的“event”变量呢？ - Maurício Giordano

@MaurícioGiordano，我想知道你是怎么做到的。我更新了我的答案 - 事件将是回调函数的第一个参数，所以你可以这样做function upHandler(event)，或者你可以通过arguments伪数组来访问它（但是最好使用命名参数）。 - Cymen