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. 如何使用LESS 深度定制Bootstrap

    一.LESS是什么? Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 中文介绍:http://lesscss.cn/ 有 ...

  2. Spark Mllib里如何删除每一条数据中所有的双引号“”(图文详解)

    不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第13章 使用决策树二元分类算法来预测分类StumbleUpon数据集

  3. No bean named 'springSecurityFilterChain' is defined

    1.问题 本文讨论Spring安全配置问题 - 应用程序引导过程抛出以下异常: SEVERE: Exception starting filter springSecurityFilterChain ...

  4. Spring Boot启动过程源码分析--转

    https://blog.csdn.net/dm_vincent/article/details/76735888 关于Spring Boot,已经有很多介绍其如何使用的文章了,本文从源代码(基于Sp ...

  5. error c2243:"类型转换" 转换存在,但无法访问

    今天在程序的中有一段class Quackable : QuackObservable,结果一直出现error c2243:"类型转换" 转换存在,但无法访问. 后来发现只要改成c ...

  6. SqlServer表和excel数据批量复制方法

    SqlServer表和excel数据批量复制方法 一.SqlServer表数据复制到excel方法: 1.新建查询,用sql语句把表数据读出来 2.然后,选择数据,右键“复制”(如果需要表字段名称,则 ...

  7. 栈的应用——Rails

    一.题目描述 某城市有一个火车站,有n节车厢从A方向驶入车站,按进站顺序编号为1~n,经中转站C驶向B.中转站C,这是一个可以停放任意多节车厢的车站,但由于末端封顶,驶入C的车厢必须以相反的顺序驶出C ...

  8. JS计算两个日期时间差,天 小时 分 秒格式

    function diffTime(startDate,endDate) { startDate= new Date(startDate); endDate = new Date(endDate); ...

  9. 剑指offer44 扑克牌顺序

    注意一个边界条件:必须是连续的,如果前后两个数是一样的也不满足条件 class Solution { public: bool IsContinuous( vector<int> numb ...

  10. MFC:AfxLoadLibrary-将指定的 DLL 映射到调用进程的地址空间

    Visual Studio 2012 - Visual C++ LoadLibrary 和 AfxLoadLibrary 进程调用 LoadLibrary (或 AfxLoadLibrary) 以显式 ...