jquery:手机的触屏事件

最新推荐文章于 2025-03-15 09:01:56 发布

原创最新推荐文章于 2025-03-15 09:01:56 发布 · 880 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

学习经历专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何使用jQuery处理手机触屏事件，包括媒体匹配设置、触屏事件的三个阶段：start、move、end，以及如何通过这些事件判断用户的滑动方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery:手机的触屏事件

先写媒体匹配
<meta name="viewport" content="width=300,maximum-scale=5.0,user-scalable=0">

触屏事件 touch()
三个阶段：start　　move　　 end

var startX,startY,moveX,moveY;
    $(".block").bind("touchstart",function(e){
        console.log(e.touches);
        /*输出结果*/
        /*TouchList {0: Touch, length: 1}*/ /*0代表第一个手指*/
        /*0:
        Touch {identifier: 0, target: div.block, screenX: 387, screenY: 250, clientX: 70.50499725341797, …}
        length:1*/
        var touch= e.touches[0];

        startX=touch.pageX;
        startY=touch.pageY;
        console.log(startX)
        console.log(startY)
    }).bind("touchmove",function(e){
        var touch= e.touches[0];
        moveX=touch.pageX||touch.clientX;
        moveY=touch.pageY||touch.clientY;
        console.log(moveX)
    }).bind("touchend",function(){
        if(moveX-startX <=0){
            console.log("左滑")
		}
        else{
            console.log("右滑")
            console.log(moveX-startX)
        }
 })