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手机触屏拖动滑 ...
随机推荐
- bzoj4563 HAOI2016放旗子
bzoj传送门 已知了"任意两个障碍不在同一行,任意两个障碍不在同一列",如果我们按每列只能放一个来考虑,那么这\(n\)个障碍一定是一个排列,那么也就是"每一列只能放一 ...
- C. Chessboard( Educational Codeforces Round 41 (Rated for Div. 2))
//暴力 #include <iostream> #include <algorithm> #include <string> using namespace st ...
- salt命令
salt-key -L list在master上所有收到的公钥连接请求 -A accept所有pending的请求. -D 删除所有 在minion上启动服务后,几十秒后会在/etc/salt/pki ...
- 使用CSS 实现菱形图片,斜条纹背景
比较简单的菱形图片: 效果如下 代码部分: <div class="d1"> <img src="img/5.jpg"> </di ...
- [软件工程基础]2017.10.27 第二次 Scrum 会议
决议 周六前项目交接 Milestone 完成 周六集体开发 游心整理物理网站上的实验流程和绪论复习题 石奇川上线静态版实验流程和绪论复习题库 李煦通构思后端如何实现绪论题库,包括和用户记录的关联方式 ...
- SVG图像学习
参考阮一峰老师: SVG 图像入门教程 基本使用 可以直接放入到html中 <body> <svg viewBox="0 0 800 600" > < ...
- 转 怎样解读10046 trace (tkprof 的结果 )
set autot on SQL> set autotraceUsage: SET AUTOT[RACE] {OFF | ON | TRACE[ONLY]} [EXP[LAIN]] [STAT[ ...
- aix 推荐使用重启
重启os AIX 主机 推荐 shutdown –Fr 在客户一次停机维护中,发现了这个问题. 环境是ORACLE 10G RAC for AIX6,使用了HACMP管理共享磁盘. 在停机维护时间段内 ...
- linux分配文件文件夹所属用户及组
ls -l 可以查看当前目录文件.如:drwxr-xr-x 2 nsf users 1024 12-10 17:37 下载文件备份分别对应的是:文件属性 连接数 文件拥有者 所属群组 文件大小 文件修 ...
- 第八章 设计用户界面 之 给Web程序应用用户界面设计
1. 概述 本章内容包括: 使用CSS创建和应用样式.使用HTML构架用户界面的层次 以及 根据需求实现动态页面内容. 2. 主要内容 2.1 使用CSS创建和应用样式 Razor程序的模板是_Lay ...