function handleTouchEvent(event) {
//只跟踪一次触摸
if (event.touches.length == ) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[].clientX + "," + event.touches[].clientY + ")";
break;
case "touchend":
output.innerHTML += "Touch ended (" + event.changedTouches[].clientX + "," + event.changeTouches[].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //阻止滚动
output.innerHTML += "Touch moved (" + event.changedTouches[].clientX + "," + event.changedTouches[].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);

1. touchstart :手指放在一个DOM元素上。
2. touchmove :手指拖曳一个DOM元素。
3. touchend :手指从一个DOM元素上移开

这是监听整个页面的触摸事件。加上这个代码后,忘记了有个变量定义了 就是 output这个。

你在页面建立一个id 放上代码 就可以看到测试结果了。

 <p id="output">这里显示坐标</p>
<script>
...上面的js代码复制到这,就可以了
</script>

jquery如何获取手机网页触屏坐标:ontouchstart 、ontouchend、ontouchmove的更多相关文章

  1. 原生js实现网页触屏滑动

    前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...

  2. jQuery中获取相对文档的坐标的方法是什么?

    offset(),获取匹配元素在当前视口的相对偏移.返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有效. position()获取匹配元素相对定位父级的偏移.没有定位父 ...

  3. jquery实现获取手机验证码倒计时效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript触屏滑动API介绍

    随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...

  5. WPF环境下多点触屏开发的一些经验(转)

    本系列将介绍Multi-Touch(MT)多点触控技术的相关内容,使开发人员了解如何在Windows 平台中开发出具有MT 功能的应用程序.众所周知Windows 7 操作系统自身已经支持具有MT 功 ...

  6. Android之触屏事件

    方法一: 新建"MyView"类 package onTouchEvent; import android.content.Context; import android.grap ...

  7. WPF Multi-Touch 开发:基础触屏操作(Raw Touch)

    原文 WPF Multi-Touch 开发:基础触屏操作(Raw Touch) 多点触控(Multi-Touch)就是通过与触屏设备的接触达到人与应用程序交互的操作过程.例如,生活中经常使用的触屏手机 ...

  8. 【转载】jQuery手机移动端触屏日历日期选择

    文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...

  9. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

随机推荐

  1. 后台管理系统·快速开发框架JSite

    平台介绍 框架基于Maven构建,拆分成多个子模块,层次结构清晰.可用于所有Web应用,如企业后台管理系统.OA系统.CMS.CRM等. 框架本身集成了最新的 Flowable工作流引擎 https: ...

  2. C# 文件操作 全收录 追加、拷贝、删除、移动文件、创建目录、递归删除文件夹及文件....

    本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下 面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...

  3. 字符串与C51的格式化输出

    一字符数组和字符指针: 字符指针可以用字符串对其直接初始化和随时赋值:而字符数组可以用字符串进行初始化,但不能用字符串对其进行随时赋值(但此时可以定义一个字符串指针指向字符数组,然后用字符串对指针随时 ...

  4. POJ 1830 开关问题 高斯消元,自由变量个数

    http://poj.org/problem?id=1830 如果开关s1操作一次,则会有s1(记住自己也会变).和s1连接的开关都会做一次操作. 那么设矩阵a[i][j]表示按下了开关j,开关i会被 ...

  5. vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数

    父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...

  6. ubuntu下sublime屏蔽alt键显示顶部菜单栏

    在sulime下喜欢把方向键映的上下左右映射为alt+i/k/j/l ,按单词移动alt+h/; 但是在ubuntu下按alt会弹出sublime的顶部菜单栏,如果想屏蔽sublime按alt屏蔽菜单 ...

  7. url post 请求方法

    最近的项目是给手机app 提供方法. 因此 此方法可以进行接口测试 static class HttpClient { static CookieContainer cookies = new Coo ...

  8. mysql命令行执行时不输出列名(字段名)

    -N 即可 如:mysql -N -e "select * from test" 摘自:http://blog.csdn.net/eroswang/article/details/ ...

  9. “chm 已取消到该网页的导航”解决方案

    1. 右键单击该 CHM 文件,然后单击“属性”. 2. 单击“取消阻止”或者“解除锁定”. 3. 双击此 .chm 文件以打开此文件.

  10. SAP Cloud for Customer(C4C)的一些学习资料

    经常有顾问朋友们问我想自学C4C,有什么好的资料. SAP内部确实有一些C4C培训材料,但是不能散布到公司外部. 想学习C4C,还是得到SAP官网网站上查找资料. 1. 登录https://help. ...