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

      

  • 相关阅读:
    elementUI form select验证问题
    Echart--基本属性
    Echart--饼状图
    Echart--折线图
    Echart--多个柱形图
    Echart--单个柱形图
    Echart--圆型图
    构析函数和构造函数
    心情
    图片
  • 原文地址:https://www.cnblogs.com/luoeeyang/p/4519408.html
Copyright © 2011-2022 走看看