移动端的触屏四个方法：touchstart，touchmove，touchend，touchcancel

移动端新增了4个与手指触摸相关的事件

• touchstart：手指触摸手机屏幕时触发
• touchmove：手指在手机屏幕移动时触发
• touchend：手指离开手机屏幕时触发
• touchcancel：系统取消touch事件的时候触发,比如电话

每个触摸事件被触发后，会生成一个event对象，event对象中changedTouches会记录手指滑动的信息。

e.touches;//当前屏幕上的手指

e.targetTouches;//当前dom元素上的手指。

e.changedTouches;//触摸时发生改变的手指。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY:     //触摸点相对于页面的位置

原生获取以及jquery获取的方法

Jquery的写法

$('#id').on('touchstart',function(e) {
    var touch = e.originalEvent.targetTouches[0];
    var x= touch.pageX;
});
 
$('#id').on('touchmove',function(e) {
    var touch = e.originalEvent.targetTouches[0];
    var x= touch.pageX;
});
 
$('#id').on('touchend',function(e) {
    var touch = e.originalEvent.changedTouches[0];
    var x= touch.pageX;
}

原生的写法

document.getElementById("id").addEventListener("touchstart",function(e)
{
    var x=e.touches[0].pageX;
    var y=e.touches[0].pageY;
    console.log("start",x)
})
document.getElementById("id").addEventListener("touchmove",function(e)
{
    var x=e.touches[0].pageX;
    var y=e.touches[0].pageY;
    console.log("move",x)
})
document.getElementById("id").addEventListener("touchend",function(e)
{
    var x=e.changedTouches[0].pageX;
    var y=e.changedTouches[0].pageY;
    console.log("end",x)
})

最后实现一个简单的滑动轮播思路

      var startX;
      var moveX;
      var endX;
      $('dom').on('touchstart',function(e){
        var touchE = e.originalEvent.targetTouches[0];//拿到触摸的对象
        startX = touchE.pageX;//记录开始位置
        clearInterval(timer);//清除轮播图的定时器
      });
      $('dom').on('touchmove',function(e){
        var touchE = e.originalEvent.targetTouches[0];
        moveX = touchE.pageX;//手指移动的位置
       
        $(this).css({
          'transition':'none',//清除过度
          'transform':'translateX('+ -当前位置 + moveX +'px)'// 让ul跟着移动
        });
        
      });

      $('.jd-banner ul').on('touchend',function(e){
        //1. 记录移动的距离
        var touchE = e.originalEvent.changedTouches[0];
        endX = touchE.pageX;//移动的距离
        //2. 判断移动距离是否超过1/3屏，判断上一屏还是下一屏，或者是吸附
        var mX = endX - startX;
        if( Math.abs(endX - startX) > liWidth / 3 ){
          mX > 0 ? index -- : index ++;//判断是否大于0 ，大于0 index--，向右滑动；小于0 index++, 向左滑动
                                                        
        }
        //3. 添加过渡，移动. 执行动画
        $(this).css({
          'transition':'all .3s',
          'transform':'translateX('+ (-index*liWidth) +'px)'
        });
        
        //4. 开启定时器
        timer = setInterval(run,1000);

      })

注意点

• touchstart，touchmove方法中使用targetTouches[0]； touchend 需要使用changedTouches[0]
• 一般我们取第一个手指的坐标，如果有其他要求可能 需要判断手指数量

if (e.targetTouches.length == 1)
{
　　//...
}

• 有时需要组织默认行为，
  e.preventDefault();