手机端touch事件

前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定。

目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。

如何获取手指滑动时的坐标位置呢?

直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好,

如果是jquery的event对象,使用event.originalEvent.changedTouches[0].clientX。


原生:document.querySelector("#aa").addEventListener('touchmove', function(){...});

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);
});

jq:  $(".aa").on("touchmove",function (e) {...};

1.获取当前touch位置

 $('#webchat_scroller').on('touchstart',function(e) {

      var touch = e.originalEvent.targetTouches[0];

      var y = touch.pageY;

      });

      $('#webchat_scroller').on('touchmove',function(e) {

      var touch = e.originalEvent.targetTouches[0];

      var y = touch.pageY;

      });

     $('#webchat_scroller').on('touchend',function(e) {

       var touch = e.originalEvent.changedTouches[0];

      var y = touch.pageY;

   });

猜你喜欢

转载自blog.csdn.net/qq_40002902/article/details/80497371
今日推荐