zoukankan      html  css  js  c++  java
  • JQuery 获取touchstart,touchmove,touchend 坐标

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

      

     以上两种办法中 touchend 需要使用changedTouches[0]

    一般我们取第一个手指的坐标,如果有其他要求可能 需要判断手指数量

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

    顺带贴出常用的一句

    e.preventDefault();
    

      

  • 相关阅读:
    面试十题(4)
    TS中给接口指定的成员?
    TS中定义泛型接口的两种方式
    ts中泛型的使用
    ts中类的属性的封装
    ts中接口的使用
    自定义hook的步骤
    react中如何使用useReducer?
    react中useContext的使用
    react 中useRef的作用
  • 原文地址:https://www.cnblogs.com/luoeeyang/p/4519408.html
Copyright © 2011-2022 走看看