移动互联网终端的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 ...
随机推荐
- Linux 下各个目录的作用及内容
在 Linux 下,我们看到的是文件夹(目录): 在早期的 UNIX 系统中,各个厂家各自定义了自己的 UNIX 系统文件目录,比较混乱.Linux 面世不久后,对文件目录进行了标准化,于1994年对 ...
- elasticsearch index tuning
一.扩容 tag_server当前使用ElasticSearch版本为5.6,此版本单个index的分片是固定的,一旦创建后不能更改. 1.扩容方法1,不适 ES6.1支持split index功能, ...
- cat命令合并多个txt文件
cat是concatenate的缩写,意为串联,之前经常看到别人在用cat命令,没有细究 cat命令两个常用的用法是: cat file.txt能够将txt中的内容显示出来 cat file1.txt ...
- [LeetCode&Python] Problem 350. Intersection of Two Arrays II
Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...
- HDU 1907:John(尼姆博弈变形)
John Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total Submi ...
- 05 ajax,jquery,xstream,json解析
Ajax “Asynchronous Javascript And XML”(异步JavaScript和XML),把原有的技术,整合到一起 1.使用CSS和XHTML来表示. ...
- YIT-CTF—隐写术
一:小心心 下载图片——>改后缀名为TXT——>打开发下最后一行有flag 二:双生 下载两张图片——>应为题目说的是双生——>想到可能是两张图片的叠加——>打开图片查看 ...
- Python语言规范
Lint 对你的代码运行pylint 定义: pylint是一个在Python源代码中查找bug的工具. 对于C和C++这样的不那么动态的(译者注: 原文是less dynamic)语言, 这些bug ...
- 求连续数字的和------------------------------用while的算法思想
前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...
- controller层,service层,dao层(main函数,子函数,子的子函数)
controller层相当于main函数————————————————————————————————————————————————————@RequestMapping("/query ...