1. 程式人生 > >手機端touch事件

手機端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;

   });