06、移动端事件

touch事件

touchstart

// touchstart：当手指在指定元素按下的时候触发

div.addEventListener('touchstart',function(){
    console.log("手指按下了");
},false)/*ture表示事件捕获，false表示事件冒泡，false时可省略*/

 

touchmove

// touchmove：当手指在指定元素按下并移动的时候触发。（一般会触发多次）

div.addEventListener('touchmove',function(){
    console.log("手指按下并移动了");
})

 

touchend

// touchend：当手指松开的时候触发。（与touchstart关联）

div.addEventListener('touchend',function(){
    console.log("手指松开了");
})

 

touchcancel（不常用）

// touchcancel：用户交互操作被系统中断时触发。（如交互时，电话来了并直接跳转过去时）

div.addEventListener('touchcancel',function(){
    console.log("操作被系统中断了");
})

 

touch的event对象

//touchstart、touchmove、touchend 中的event对象属性相同

      altkey：当此属性为true时，表示点击的时候同时按住了alt键。一般为false

     bubbles：表示当前是否冒泡，是就为true

cancelBubble：表示当前是否已经取消了冒泡，取消了就true

  cancelable：表示当前是否可以取消冒泡，可以取消就true

        type：里面显示当前是touch的哪个状态，如touchstart、touchmove、touchend等等。

      target：里面显示当前是哪个html元素触发的事件，如div#qq

 

changedTouches

//触摸的列表，里面包含了目标元素里并产生移动等操作的手指信息，如

0: ......//第1根手指的信息。
1: ...      //第2根手指的信息
length: ...  //里面表示有多少个手指的信息

 

targetTouches

//触摸的列表，里面包含了目标元素中的所有手指信息，里面属性信息同上

touches

//触摸的列表，里面包含了屏幕上所有手指的信息，里面属性信息同上

小贴士

//在touchstart、touchmove时上面3个都能检测到手指信息
//但是在touchend时，屏幕上没有了手指信息（touches检测不到手指），目标元素上也没有手指信息（targetTouches检测不到手指），只有changedTouches留下了发生改变的手指（发生move、end等操作的手指）
//所以一般使用changedTouches来获取手指信息就比较好

 

changedTouches详解

clientX：屏幕上手指的x坐标（不算滚动条）
clientY：屏幕上手指的y坐标（不算滚动条）

pageX：手指的x坐标（算滚动条）
pageY：手指的y坐标（算滚动条）

identifier：手指的唯一标识符，如0、1、2等等

radiusX：手指触摸屏幕的半径
radiusY：手指触摸屏幕的半径
rotationAngle：旋转角度

 

拖拽效果

//先自己定义各个bb元素即可，看自己需求可加个固定定位使用

var now = {    //记录当前坐标
    x:0,
    y:0
};

bb.ontouchstart = function(event){
    start={    //记录元素开始坐标
        x:event.changedTouches[0].pageX,
        y:event.changedTouches[0].pageY
    }
    //console.log('开始横坐标'+start.x+'，开始纵坐标'+start.y)
}

bb.ontouchmove = function(event){
    event.preventDefault();    //阻止默认事件
    move={    //记录最新的元素坐标
        x:event.changedTouches[0].pageX,
        y:event.changedTouches[0].pageY                
    }
    //console.log('移动的横坐标'+move.x+'，移动的纵坐标'+move.y);
    translate = {    //计算需要移动的距离
        x : move.x - start.x +now.x,
        y : move.y - start.y +now.y
    }
    //开始移动
    bb.style.transform = 'translate3d('+translate.x+'px,'+translate.y+'px,0)';
}
        
bb.ontouchend = function(event){    //更新当前位置        
    now.x += event.changedTouches[0].pageX - start.x;
    now.y += event.changedTouches[0].pageY - start.y;            
    //console.log(now.x,now.y)
}

 

 

Hammer.js

//若需要监听移动端的各种事件可以用 锤子来监听

hammer.js：http://hammerjs.github.io/

Hammer是一个开放源代码库，可以识别由触摸，鼠标和pointerEvents做出的手势。它没有任何依赖关系，并且很小，只有7.34 kB压缩+压缩！

使用

下载：http://hammerjs.github.io/dist/hammer.min.js

引入：

<script type="text/javascript" src="hammer.min.js"></script>

 

新建对象：

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});    

 

除了pan之外，还有很多可以监听的参数（可以一下监听多个参数），如：

pan：滑动
swipe：快速滑动
swipeleft：左滑
swiperight：右滑
tap：点击
doubletap：双击
press：长按
pinch：捏
rotate：旋转

 

具体使用

<div id="bb"></div>

var hammertime = new Hammer(bb);
hammertime.on('pan', function(ev) {
    console.log(滑动了);
    console.log(ev.type);//当前触发的事件类型
});