手机端touch事件

本文介绍如何在iOS设备上通过touchstart、touchmove和touchend事件获取手指滑动时的坐标位置,包括原生JavaScript和jQuery两种方式的具体实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前提: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;

   });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值