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事件判断方向的更多相关文章

  1. 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  2. 移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  3. 移动互联网终端的touch事件,touchstart, touchend, touchmove

    如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常会有一 ...

  4. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  5. 《移动端浏览器Touch事件判断手指滑动方向方法》

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  6. 前端touch事件方向的判断

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  7. Android学习第六弹之Touch事件的处理

    在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里 ...

  8. 手持设备点击响应速度,鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  9. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

随机推荐

  1. LexAndYacc 安装程序

    在ubuntu 下面执行 sudo apt-get install byacc flex bison

  2. jQuery的事件

    事件冒泡处理 使用event.stopPropagation();阻止事件冒泡 冒泡事件也可以使用return false来处理 并且 <script type="text/javas ...

  3. 给电脑换源 npm 国内镜像 cnpm

    (1)通过 config 配置指向国内镜像源 npm config set registry http://registry.cnpmjs.org //配置指向源 npm info express   ...

  4. PTA——最大公约数和最小公倍数

    PTA 7-26 最大公约数和最小公倍数 #include<stdio.h> int main(){ int num1,num2,temp1,temp2,r; scanf("%d ...

  5. NET Core + Ocelot + IdentityServer4 + Consul

    .NET Core + Ocelot + IdentityServer4 + Consul 基础架构实现 先决条件 关于 Ocelot 针对使用 .NET 开发微服务架构或者面向服务架构提供一个统一访 ...

  6. sourcetree删除github远程仓库文件

    sourcetree删除远程仓库的master分支文件步骤 第一步:删除本地远程仓库分支的所需要文件或者文件夹(本地和远程仓库同步) 第二步:回到sourcetree提交,推送 第三步:刷新远程仓库

  7. 每天进步一点点-一切皆对象/一次编写,到处运行/bean工厂

    只要这个配置文件一写,其他所有的java类都可以用 用法1.直接在类中getBeans,然后调用beans的方法 用法2.将这些bean进行注入,基于xml的注入<property name=& ...

  8. nginx实现反向代理,以反向代理tomcat为例

    我的nginx和tomcat在同一台服务器上 我nginx安装的位置(因为我安装时使用的是./configure --prefix=/usr/etc/nginx)是/usr/etc/nginx,进入安 ...

  9. laravel使用过程中一些总结

    推荐连接: laravel辅助函数总结:https://laravel-china.org/docs/laravel/5.5/helpers 基于 Laravel 集成的 Monolog 库对日志进行 ...

  10. CodeBlocks中去掉下划线的方法

    [问题] 如上图所示,某些字符下面会出现红色下划线,看着挺难受后的,决定想办法去掉. 这是拼写检查插件在作怪,把这个插件屏蔽掉就OK了. [步骤一]点击[插件]下的[管理插件]按钮 [步骤二]点击[管 ...