js Touch事件(向左滑动,后退)
js Touch事件(向左滑动,后退)
代码如下
var touch_p = {
c_x : 0,
c_y : 0,
hasbacked : false
};
function touches(ev){
if(ev.touches.length==1){
switch(ev.type){
case 'touchstart':
if(console)
console.log('Touch start('+ev.touches[0].clientX+', '+ev.touches[0].clientY+')');
touch_p.c_x = ev.touches[0].clientX;
touch_p.c_y = ev.touches[0].clientY;
ev.preventDefault();
break;
case 'touchend'://未成功触发,未找到原因
//oDiv.innerHTML='Touch end('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')';
if(console)
console.log('Touch end('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')');
break;
case 'touchmove':
var tempX = ev.changedTouches[0].clientX;
var tempY = ev.changedTouches[0].clientY;
var diff_x = tempX - touch_p.c_x;
var diff_y = Math.abs(tempY - touch_p.c_y);
/*console.log('Touch move('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')<br>diff_x=' + diff_x
+ "<br>diff_y=" + diff_y);*/
//x轴方向移动超过150 纵轴方向移动小于30
if(!touch_p.hasbacked && diff_x > 150 && diff_y < 30){
goback();
}
break;
}
}
}
document.addEventListener('touchstart',touches,false);
document.addEventListener('touchend',touches,false);
document.addEventListener('touchmove',touches,false);
function goback() {
if(console)
console.log("go back");
touch_p.hasbacked = true;
window.history.back();
}
js Touch事件(向左滑动,后退)的更多相关文章
- js移动端向左滑动出现删除按钮
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...
- 关于js touch事件 的引用设置
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- 移动端 js touch事件
随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...
- 浅谈移动端之touch事件--手指的滑动事件
今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- 移动端之touch事件--手指的滑动事件
转自[B5教程网]:http://www.bcty365.com/content-142-5243-1.html 总结:touchmove的最后坐标减去touchstart的起始坐标.X的结果如果正数 ...
- 移动端touch事件实现页面弹动--小插件
动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...
- js实现touch移动触屏滑动事件
在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...
随机推荐
- Spring在Web项目中的三种启动加载的配置
在最近的项目中,使用到了spring相关的很多东西,有点把spring的配置给搞混了,从网上查到的资料以及整理了一下. 在Web项目中,启动spring容器的方式有三种,ContextLoaderLi ...
- 转--xcode duplicate symbol问题
遇到引用库重复定义的问题,需要解决. 项目需要,同时引用ZBar和QQ授权登录SDK,由于二者均使用了Base64处理数据,XCode编译时报错: duplicate symbol _base64 ...
- 我、实战nginx+naxsi(WAF)之一
差不多,一个星期多的时间都过去了.但是还是感觉时间过的太快,总是不禁的让人长叹一声,关于nginx和(naxsi)WAF这个问题,也算是只走出了第一步,在遇到了各种乱七八糟的错误之后总算是想要静下心来 ...
- [转]oracle odp.net 32位/64位版本的问题
本文转自:http://www.cnblogs.com/yjmyzz/archive/2011/04/19/2020793.html 如果你的机器上安装了odp.net,且确信machine.conf ...
- msp430f149的低功耗模式
430的低功耗确实很强啊,虽然和VR单片机比起来速度慢了好多.在CPU进行工作时,如果没有什么事情干,就得进入低功耗模式啦,LMPX(0~4)这几种模式的具体事项就是如下的,得记住了. 一,运行模式M ...
- Java阻塞中断和LockSupport
在介绍之前,先抛几个问题. Thread.interrupt()方法和InterruptedException异常的关系?是由interrupt触发产生了InterruptedException异常? ...
- aspjpeg 半透明描边的实现函数
'参数说明 'big 原图路径(相对) 'small 生成图路径(相对) 'width_s 生成后宽度(数值型) 'height_s生成后高度(数值型) 'images/Alpha.jpg 为一个像素 ...
- Java算法求最大最小值,冒泡排序,斐波纳契数列一些经典算法<不断更新中>
清明在家,无聊,把一些经典的算法总结了一下. 一.求最大,最小值 Scanner input=new Scanner(System.in); int[] a={21,31,4,2,766,345,2, ...
- JavaWeb_数据传输_原
本节目录: 1.如何从Servlet向JSP传送数据:(setAtrribute和getAtrribute) 2.jsp如何输入表达数据以及传数据到servlet(FormAction去向和Inpu ...
- 使用asp.net上传图片并且裁剪的方法
工欲善其事,必先利其器,坚持才能更好 这篇文章主要是强调怎么使用asp.net上传图片并且能够裁剪,这个功能主要使用在注册信息的时候需要上传头像并且图片格式很大的时候能够把图片裁剪成更小的图片.下面来 ...