1. function handleTouchEvent(event) {
  2. //只跟踪一次触摸
  3. if (event.touches.length == ) {
  4. var output = document.getElementById("output");
  5. switch (event.type) {
  6. case "touchstart":
  7. output.innerHTML = "Touch started (" + event.touches[].clientX + "," + event.touches[].clientY + ")";
  8. break;
  9. case "touchend":
  10. output.innerHTML += "Touch ended (" + event.changedTouches[].clientX + "," + event.changeTouches[].clientY + ")";
  11. break;
  12. case "touchmove":
  13. event.preventDefault(); //阻止滚动
  14. output.innerHTML += "Touch moved (" + event.changedTouches[].clientX + "," + event.changedTouches[].clientY + ")";
  15. break;
  16. }
  17. }
  18. }
  19. document.addEventListener("touchstart", handleTouchEvent, false);
  20. document.addEventListener("touchend", handleTouchEvent, false);
  21. document.addEventListener("touchmove", handleTouchEvent, false);

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

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

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

  1. <p id="output">这里显示坐标</p>
  2. <script>
  3. ...上面的js代码复制到这,就可以了
  4. </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. python连接mysql时连接不到test文件夹怎么办

    最新版mysql安装后默认是没有test文件夹的,这时候需要我们自己创建一个test文件夹, 文件默认路径如下    C:\ProgramData\MySQL\MySQL Server 5.7\Dat ...

  2. python操作rabbitmq实现广播效果

    生产方(Fanout_Publisher.py) # __author__ = 'STEVEN' import pika #开启socket connection = pika.BlockingCon ...

  3. 【bzoj1731】Layout 排队布局

    1731: [Usaco2005 dec]Layout 排队布局 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 868  Solved: 495[Subm ...

  4. SpringMVC-Handler-Return Values返回值

    Handler-Return Values返回值 支持的返回类型列表 Same in Spring WebFlux The table below shows supported controller ...

  5. foreach循环与迭代器循环 删除插入元素的区别

     (1)仅对其遍历而不修改容器大小时,只使用foreach循环 (2)需要边遍历边修改容器大小时(插入删除元素),只使用迭代器循环 import java.util.HashMap;import ja ...

  6. 转 PHP函数---$_Get()和$_Post()的用法

    一.$_Get()和$_Post()函数是用来传值的,即对应两种提交表单的方法,get和post. 二.$_Get方法 (1)获取通过URL的传值 Example 1 新建两个PHP文件,1.php, ...

  7. [已读]了不起的Node.js

    2015/1/22 昨天下班前看完了这本,也不算看完,redis与mysql部分没有去翻,觉得暂时用不上. 觉得第一部分的内容还不错. 第二部分主要讲fs,tcp和http这三个模块. 第三个部分是例 ...

  8. Solr查询中涉及到的Cache使用及相关的实现【转】

    转自:http://www.cnblogs.com/phinecos/archive/2012/05/24/2517018.html 本文将介绍Solr查询中涉及到的Cache使用及相关的实现.Sol ...

  9. css3のtext-shadow

    text-shadow,让我们大家一起来学习一下吧. 语法: text-shadow:none | <shadow> [ , <shadow> ]* <shadow> ...

  10. .Net 第一章笔记

    1.深入.NET框架 对象数组 登录和注册 内存级别数据的拎取 1..NET 战略 Java领域:::::SQL Server不会用到 浏览器IE 口号:任何人 在任何地方 使用任何终端,,都可以使用 ...