想在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[]; //获取第一个触点
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[]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标 //document.getElementById("version").innerHTML = "原:"+startY+" "+"现:"+y;
//判断滑动方向 上下 if (y - startY > ) {
swipeDown();//你自己的方法 我是用来翻页的一样的
} else if(y - startY < -){
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);
}
}

js获取移动端触摸坐标的更多相关文章

  1. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  2. js 处理移动端触摸事件

    在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的 ...

  3. js获取元素的页面坐标

    一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+borde ...

  4. js 获取服务端时间,并实现时钟

    本例子以vue语法伪代码书写: 1,获取服务端北京时间 getRealTime() { let that = this; var xhr = new XMLHttpRequest(); if( !xh ...

  5. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  6. js获取服务端IP及端口及协议

    alert("location:"+window.location); alert("href: "+window.location.href); alert( ...

  7. JS获取坐标

    1.js获取对象的绝对坐标 方法1: function getAbsPoint(e) { var x = e.offsetLeft, y = e.offsetTop; while(e=e.offset ...

  8. js获取控件位置以及不同浏览器中的差别

    js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...

  9. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

随机推荐

  1. SpringBoot | 启动异常 | 显示bulid success 无 error信息

    可能原因是没有添加 web 依赖,检查pom里面是否有web <dependency> <groupId>org.springframework.boot</groupI ...

  2. java多线程模拟红绿灯案例

    代码Lighter.java: package pack1; /** * 灯线程 * @author Administrator * */ public class Lighter extends T ...

  3. java快速排序代码

    public class test1 { public static int partition(int[] array,int lo,int hi){ int key=array[lo]; whil ...

  4. [poj 2104] K-th Number【主席树】

    传送门:http://poj.org/problem?id=2104 保存模版. #include <cstdio> #include <algorithm> #include ...

  5. 配置Gradle构建

    构建基础配置 Android Studio包含一个顶级的构建文件和每个模块的构建文件.构建文件被称为 build.gradle,它是一个纯文本文件,它使用Groovy语法来配置由Android Gra ...

  6. php pack、unpack、ord 函数使用方法(二进制流接口应用实例)

    在工作中,我也逐渐了解到pack,unpack,ord对于二进制字节处理的强大. 下面我逐一介绍它们.在我们工作中,用到它们的估计不多. 我在最近一个工作中,因为通讯需要用到二进制流,然后接口用php ...

  7. Help with Intervals(集合的交并补,线段树)

    很早以前做过这题,早就没印象了,估计当时也是照着某大神的代码抄过的,现在是连题意都看了好长时间. 刚开始的S集合是空集,给你一些操作和一个T集合,把操作的结果再赋给S集合. 解法:因为会有开区间和闭区 ...

  8. JS中数组的介绍

    一.数组: 一组数据的集合: 二.JS中数组的特点: 1.数组定义时无需指定数据类型: 2.数组定义时可以无需指定数组长度: 3.数组可以存储任何类型的数据: 4.一般是相同的数据类型: 三.数组的创 ...

  9. 2840 WIKIOI——评测

    2840 WIKIOI——评测 时间限制: 1 s 空间限制: 2000 KB 题目等级 : 白银 Silver       题目描述 Description Wikioi上有一题有N个测试点,时限为 ...

  10. spark性能测试理论-Benchmark(转)

    一.Benchmark简介Benchmark是一个评价方式,在整个计算机领域有着长期的应用.正如维基百科上的解释“As computer architecture advanced, it becam ...