码迷,mamicode.com
首页 > 移动开发 > 详细

移动端触摸事件及对象

时间:2017-09-25 11:44:21      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:document   screen   text   init   max   change   client   add   start   

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title></title>
    </head>
  <body>
    <div class="one">hehehehehehe</div>
    <div class="two">hahhahhahaha</div>
    <script type="text/javascript">
      /*
        *clientX:触摸目标在视口中的x坐标。
        *clientY:触摸目标在视口中的y坐标。
        *identifier:标识触摸的唯一ID。
        *pageX:触摸目标在页面中的x坐标。
        *pageY:触摸目标在页面中的y坐标。
        *screenX:触摸目标在屏幕中的x坐标。
        *screenY:触摸目标在屏幕中的y坐标。
         *target:触目的DOM节点目标。
        *touches:touch对象,里面包含的是一些坐标信息。
        * targetTouches:touch对象,包含坐标信息,具体情况不清楚,如果length代表了手指的数量。
        * changedTouches:touch对象,包含坐标信息,具体情况不清楚。
      * */
      //监听手指滑动
      document.addEventListener(‘touchmove‘, function(event){
        // var x = event.touches[0].clientX;
        // var y = event.touches[0].clientY;
        // var identifier = event.touches[0].identifier;
        // var pageX = event.touches[0].pageX;
        // var pageY = event.touches[0].pageY;
        // var screenX = event.touches[0].screenX;
        // var screenY = event.touches[0].screenY;
        // var target = event.touches[0].target;
        // console.log(x,y,identifier,pageX,pageY,screenX,screenY,target)
        console.log(event.targetTouches.length)
        // console.log(‘2:‘,event.changedTouches)
      });
      //监听触摸
      // document.addEventListener(‘touchstart‘, function(event) {
        // alert(1)
      // });
      //监听触摸结束
      // document.addEventListener(‘touchend‘, function(){
        // alert(3)
      // });
    </script>

  </body>
</html>

移动端触摸事件及对象

标签:document   screen   text   init   max   change   client   add   start   

原文地址:http://www.cnblogs.com/yzyh/p/7590534.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!