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. Sublime Text 报“Pylinter could not automatically determined the path to lint.py

    Pylinter could not automatically determined the path to lint.py. please provide one in the settings ...

  2. Image.resize()和Image.thumbnail()的区别

    Image.resize()和Image.thumbnail()的区别 根据代码和代码注释, 这两个函数都是对图片进行缩放, 两者的主要区别如下: resize()函数会返回一个Image对象, th ...

  3. 【loj10064】黑暗城堡

    #10064. 「一本通 3.1 例 1」黑暗城堡 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统    评测方式:文本比较 上传者: 1bentong 提交     ...

  4. Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) C

    Misha and Vanya have played several table tennis sets. Each set consists of several serves, each ser ...

  5. 用python编写一个计算器

    # 1 - 2 * ((60-30 +(-40.0/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4*3)/ (16-3*2)))# 通过Pyt ...

  6. python __new__ __init__ 区别

    参数 __new__的第一个占位参数是class对象 __init__的第一个占位参数是class的实例对象 其他的参数应一致 作用 __new__ 用来创建实例,在返回的实例上执行__init__, ...

  7. python入门之迭代器

    迭代器 已知,可以直接作用于for循环的数据类型有: 一类是集合数据类型,如list.tuple.dict.set.str 一类是generator,包括生成器和带yield的generator fu ...

  8. 181. 将整数A转换为B

    181. 将整数A转换为B 如果要将整数A转换为B,需要改变多少个bit位? 注意事项 Both n and m are 32-bit integers. 您在真实的面试中是否遇到过这个题? Yes ...

  9. php出现Warning: file_put_contents,failed to open stream

    Warning: file_put_contents(D:/wwwroot/jinxiongdi/web/temp/caches/f/index_40F756F0.php) [function.fil ...

  10. go实现生产者消费者

    package main import ( "fmt" "math/rand" ) func main() { ch := make(chan int) don ...