手机触摸屏的JS事件

最新推荐文章于 2024-04-12 01:39:35 发布

大爱无疆强

最新推荐文章于 2024-04-12 01:39:35 发布

阅读量789

点赞数

分类专栏： JavaScript 文章标签： touchJs

JavaScript 专栏收录该内容

49 篇文章

订阅专栏

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

        touchstart:   
        // 手指放到屏幕上的时候触发 
       
        touchmove:  
        // 手指在屏幕上移动的时候触发 
       
        touchend:  
        // 手指从屏幕上拿起的时候触发 
       
        touchcancel:   
        // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到（一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：

        client / clientY：
        // 触摸点相对于浏览器窗口viewport的位置 
       
        pageX / pageY：
        // 触摸点相对于页面的位置 
       
        screenX /screenY：
        // 触摸点相对于屏幕的位置 
       
        identifier： 
        // touch对象的unique ID

HTML主体定义

      <body style=”height: 100%;margin:0;padding:0”>
     
      <div id=”canvas”  style=”position: relative;width:100%;height: 100%;”></div>
     
      </body>