zoukankan      html  css  js  c++  java
  • js获取移动端触摸坐标

    想在touchmove事件里监听手指按下的坐标,event.pageX获取的是undefined,changedTouches,targetTouches,touches也只获得到了鼠标按下时的坐标,没法持续监听,求帮助!或者其他办法也行,效果大概是一个元素,手指在上面滑动,然后改变这个元素的top之类的...//禁用手机默认的触屏滚动行为


    document.addEventListener('touchmove', function(event) { event.preventDefault(); }, false); //touchstart事件 function touchSatrtFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; } catch (e) { alert('touchSatrtFunc:' + e.message); } } //touchmove事件,这个事件无法获取坐标 function touchMoveFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //document.getElementById("version").innerHTML = "原:"+startY+" "+"现:"+y; //判断滑动方向 上下 if (y - startY > 100) { swipeDown();//你自己的方法 我是用来翻页的一样的 } else if(y - startY < -100){ swipeUp();//你自己的方法 } } catch (e) { alert('touchMoveFunc:' + e.message); } } //touchend事件 function touchEndFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 } catch (e) { alert('touchEndFunc:' + e.message); } } //绑定事件 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); document.addEventListener('touchend', touchEndFunc, false); } //判断是否支持触摸事件 function isTouchDevice() { //document.getElementById("version").innerHTML = navigator.appVersion; try { document.createEvent("TouchEvent"); //alert("支持TouchEvent事件!"); bindEvent(); //绑定事件 } catch (e) { alert("不支持TouchEvent事件!" + e.message); } }
  • 相关阅读:
    程序员你写的代码,被爆出黑产了!
    .NET面试题系列之面向对象
    .NET必问的面试题系列之基本概念和语法
    xamarin开发android收集的一些工具
    C#爬虫使用代理刷csdn文章浏览量
    我们必须要知道的RESTful服务最佳实践
    MVP架构在xamarin android中的简单使用
    使用Xamarin实现跨平台移动应用开发(转载)
    博客园app for xamarin android一款简洁阅读的博客园android客户端
    vs2019企业版密钥
  • 原文地址:https://www.cnblogs.com/pengchengzhong/p/6051487.html
Copyright © 2011-2022 走看看