jquery如何获取手机网页触屏坐标:ontouchstart 、ontouchend、ontouchmove
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的更多相关文章
- 原生js实现网页触屏滑动
前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...
- jQuery中获取相对文档的坐标的方法是什么?
offset(),获取匹配元素在当前视口的相对偏移.返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有效. position()获取匹配元素相对定位父级的偏移.没有定位父 ...
- jquery实现获取手机验证码倒计时效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript触屏滑动API介绍
随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...
- WPF环境下多点触屏开发的一些经验(转)
本系列将介绍Multi-Touch(MT)多点触控技术的相关内容,使开发人员了解如何在Windows 平台中开发出具有MT 功能的应用程序.众所周知Windows 7 操作系统自身已经支持具有MT 功 ...
- Android之触屏事件
方法一: 新建"MyView"类 package onTouchEvent; import android.content.Context; import android.grap ...
- WPF Multi-Touch 开发:基础触屏操作(Raw Touch)
原文 WPF Multi-Touch 开发:基础触屏操作(Raw Touch) 多点触控(Multi-Touch)就是通过与触屏设备的接触达到人与应用程序交互的操作过程.例如,生活中经常使用的触屏手机 ...
- 【转载】jQuery手机移动端触屏日历日期选择
文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
随机推荐
- Java | 基础归纳 | 静态方法与实例方法的区别
静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这种方 ...
- PostgreSQL-5-条件过滤
基本语法 SELECT column1, column2, columnN FROM table_name WHERE [search_condition] 操作符 =等于:<>不等于:! ...
- [题解]区间dp_luogu_P3147 262144
小数据版本P3146,可以区间dp, 性质:对于一个区间如果能合并成一个数,那么这个数是确定的 理解:把每个数看做 2^x 的形式,那么如果合并:2^x + 2^x =2^(x+1) 所以 f [ i ...
- Jmeter-提取Json数据进行关联
1:Json后置处理器提取结果作为下一个sampler的传入参数 1.1:[线程组]->[简单控制器]->[HTTP sampler]->[Beanshell后置取样器]-> ...
- python之模块random,time,os,sys,序列化模块(json,pickle),collection
引入:什么是模块: 一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类型. 1.使用python编写的代码(.py ...
- Help with Intervals(集合的交并补,线段树)
很早以前做过这题,早就没印象了,估计当时也是照着某大神的代码抄过的,现在是连题意都看了好长时间. 刚开始的S集合是空集,给你一些操作和一个T集合,把操作的结果再赋给S集合. 解法:因为会有开区间和闭区 ...
- android开发学习 ------- 【转】 android中的线程池
线程很常见 , https://blog.csdn.net/seu_calvin/article/details/52415337 参考,保证能看懂.
- mirror.js 整合redux的好工具
mirror.js 很简单,让state管理更方便了,没有新增api,值 得使用 https://github.com/yurizhang/mirror package.json { "na ...
- 自定义Mega菜单的巧妙实现
查看了<云制造>官网源码,为其mega菜单的巧妙实现打call. 其另辟蹊径,采取父级主控分支的方法,仅对父级“增加/删除”控制标识,从而控制子层显示. <!DOCTYPE html ...
- AzureARM 使用 powershell 扩容系统磁盘大小
azure中的虚拟机,windows磁盘大小为127G,linux磁盘大小为30G,在很多时候部署应用程序时直接部署到系统磁盘内导致磁盘后期容量不够需要扩容,在执行分区扩容前我们需要先通过Potal或 ...