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

touch——移动端

时间:2015-06-09 13:11:25      阅读:337      评论:0      收藏:0      [点我收藏+]

标签:

touch事件原生一定要用addEventListener来绑定
一、原生
  • touchstart:触摸开始时触发
  • touches:当前位于屏幕上所有手指的列表
    • event.touches.length : 记录一瞬间触摸到的手指数
    • event.touches[0].screenX : 记录第一根手指在屏幕的x轴位置
    • event.touches[0].screenY : 记录第一根手指在屏幕的y轴位置
  • touchmove:手指在屏幕中移动时触发
  • touchend:触摸结束的时候触发
为阻止滑动屏幕时使得页面切换,一般会添加阻止默认事件:
document.addEventListener("touchstart",function (){
    event.preventDefault();
},false);
二、touch.js
  • 格式:
    • touch.on(obj,"",listener);
    • obj:对象,不是获取的,如:#div等
    • “”:里面为移动事件
    • listener:为函数function(){}
 
  • drag:抓取并拖动目标
  • touch.on("#div1","drag",function (ev){
    console.log(ev.x+","+ev.y); //移动的x/y轴距离
    });
 
  • dragend:拖动结束时触发
 
  • swipe:滑动手指触发
    • swipeleft:向左滑动触发
    • swiperight:向右滑动触发
    • swipeup:向下滑动触发
    • swipedown:向上滑动触发
 
  • tap:点击一次触发
 
  • doubletap:双击触发
 
  • pinch:捕获手势(放大或缩小)
    • ev.scale:捕获放大的倍数
    • obj.style.webkitTransform = "scale("+ds+")";
      //设置对于原来的放大/缩小倍数

       

  • rotate:旋转(双指)
    • touch.on("#div1","rotate",function (ev){
      var newAngle=ev.rotation+angle; //ev.rotation 捕获当前旋转的角度
      if (ev.fingerStatus == "end"){ //ev.fingerStatus 捕获当前手指状态(开始/运动/结束)
      angle=newAngle;
      }
      this.style.webkitTransform="rotate("+newAngle+"deg)"; //设置变换角度
      });

       

  • 在touchstart中加入:
    • touch.on("#div1","touchstart",function (ev){
      ev.startRotate(); //可以用单指来旋转
      ev.preventDefault();
      });
 
三、移动端事件——deviceorientation(可做重力游戏)
  • event.beta:  x轴
  • event.gamma:  y轴
  • event.alpha:  z轴

技术分享

技术分享

touch——移动端

标签:

原文地址:http://www.cnblogs.com/pan-hello/p/4563042.html

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