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. TrueCrypt 7.1a Hashes

    Here are the SHA256, SHA1, and MD5 hashes of all TrueCrypt version 7.1a files. The signature of the ...

  2. 【leetcode】7-ReverseInteger

    problem: Reverse Integer 注意考虑是否越界: INT_MAX INT_MIN 32bits or 64bits 调整策略,先从简单的问题开始:

  3. JAVA基础部分复习(四、抽象类与接口)

    抽象类与接口的定义: package cn.review.day02; /** * 抽象类 * 定义: * 1.抽象类使用关键字abstract修饰 * 2.抽象方法必须定义在抽象类中,抽象方法没有方 ...

  4. memoization

    memoization 是指通过缓存函数返回结果来加速函数调用的一种技术.仅当函数是纯函数 时结果才可以被缓存,也就是说,函数不能有任何副作用或输出,也不能依赖任何全局状态 import math _ ...

  5. [LeetCode&Python] Problem 599. Minimum Index Sum of Two Lists

    Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...

  6. RuntimeError: Broken toolchain: cannot link a simple C program

    今天Python2.7下安装numpy的时候遇到了此错误,进过查阅发现以下方法可行 在Python27\Lib\distutils\msvc9compiler.py 文件中,找到 mfinfo = s ...

  7. 关于js 异步回调的一些方法

    http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

  8. MyBatis-Plus使用教程

    单机版 安装环境 上传压缩包到/usr/local/software/下 解压安装包,进入解压目录的bin目录下,启动命令: ./solr start -force 默认端口是8983,请求虚拟机, ...

  9. D. The Fair Nut and the Best Path 树形dp (终于会了)

    #include<bits/stdc++.h> #define int long long using namespace std; ; int a[maxn]; int dp[maxn] ...

  10. 基本数据类型,数字int字符串str

    基本数据类型 数字 int 字符串 str 布尔值 bool 列表 list 字典 dict 元组 tuple(待续...) 整数 int - 创建 a = 123 a = int(123) - 转换 ...