【问题标题】:jQuery touch events iOS won't workjQuery触摸事件iOS将不起作用
【发布时间】:2013-02-06 05:49:24
【问题描述】:

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

当您将手指触摸到屏幕上时,它会保存手指位置。 当您移动手指并松开它时,它会保存最后一个手指位置。 通过简单的几何图形,它会发现您滑动的方向。

此脚本在使用 Google Chrome 和 Android 默认浏览器的 Android 4.1.2 上运行良好。 当我使用 Safari 在 iOS 上尝试时,它不起作用。

有人可以帮忙吗?

【问题讨论】:

    标签: javascript android jquery ios touch


    【解决方案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);
    

    【讨论】:

    • 没有。我测试了 touchstart 和 touchmove 都可以。但是 touchcancel 和 touchend 都不起作用。
    • 我想念你没有使用 jQuery。我会更新我的答案。使用 jQuery 时,on 等会为您做类似的事情。
    • 谢谢!有用!你能用事件监听器+jquery做一个例子吗?
    • @MaurícioGiordano 当然——我添加了一个如何使用 jQuery 的 on 的示例。
    • 但是通过这样做,我如何获得包含触摸位置的“事件”变量?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-11
    • 1970-01-01
    • 1970-01-01
    • 2013-07-06
    相关资源
    最近更新 更多