移动互联网终端的touch事件判断方向
var pressX = 0, pressY = 0;
document.body.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (Math.abs(spanX) > Math.abs(spanY)) {
//水平方向
if (spanX > 0) {
direct = "right";//向右
//do right function
} else {
direct = "left";//向左
//do left function
}
} else {
//垂直方向
if (spanY > 0) {
direct = "down";//向下
//do down function
} else {
direct = "up";//向上
//do up function
}
}
}, false);
document.body.addEventListener('touchstart', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
pressX = touch.pageX;
pressY = touch.pageY;
touchStart.value = pressX + ';' + pressY;
}
}, false);
移动互联网终端的touch事件判断方向的更多相关文章
- 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 移动互联网终端的touch事件,touchstart, touchend, touchmove
如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常会有一 ...
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- 前端touch事件方向的判断
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- Android学习第六弹之Touch事件的处理
在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里 ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
随机推荐
- hadoop day 4
1.自定义的一种数据类型,要在hadoop的各个节点之间传输,应该遵循hadoop的序列化机制 就必须实现hadoop相应的序列化接口Writable 实现的方法包括:write(),readFiel ...
- pycharm远程服务器进行调试
背景是这样的:我有一台远程的服务器,以及一台本地的电脑:现在我想用远程的服务器上的python编译器来运行代码,怎么办?通用的做法是ssh服务器,vim代码,之后python运行文件,但是如果遇到调试 ...
- SpringBoot 配置文件详解
springboot采纳了建立生产就绪spring应用程序的观点. Spring Boot优先于配置的惯例,旨在让您尽快启动和运行.在一般情况下,我们不需要做太多的配置就能够让spring boot正 ...
- 多点搜的bfs
Problem L. 跑图Time limit: 1000msMemory limit: 65536KBDescription跑图是 RPG 游戏中很烦躁的事情.玩家需要跑到距离他最近的传送点的位置. ...
- J2EE中几个常用的名词解释
1.web容器:给处于其中的应用程序组件(JSP,SERVLET)提供一个环境,使JSP,SERVLET直接和容器中的环境变量接接口互,不必关注其它系统问题.主要有WEB服务器来实现.例如:TOM ...
- grep 的学习 正则
grep 命令: grep "name" /path/file_name 从file_name文件中中查找 name 字符 grep -c "name ...
- javascrpit的理解
1.什么是Javascrpt? 轻量级 .编程语言 HTML+css -->设计 参数的默认值设置 函数的闭包: 浏览器加载整个页面的过程 浏览器:多线程 1.js引擎 2.UI渲染 3.事件线 ...
- STM32F4的sct文件理解
原文地址http://blog.sina.com.cn/s/blog_898f36590100ya2l.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- shell 修改工作路径
import os os.getcwd() #查看现路径 os.chdir('新路径') #修改路径
- 【SpringBoot】SpringBoot热部署和配置文件自动注入实战
========================3.SpringBoot热部署devtool和配置文件自动注入实战 ============================ 1.SpringBoot2 ...