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事件(向左滑动,后退)的更多相关文章

  1. js移动端向左滑动出现删除按钮

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...

  2. 关于js touch事件 的引用设置

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  3. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  4. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  5. 浅谈移动端之touch事件--手指的滑动事件

    今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...

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

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

  7. 移动端之touch事件--手指的滑动事件

    转自[B5教程网]:http://www.bcty365.com/content-142-5243-1.html 总结:touchmove的最后坐标减去touchstart的起始坐标.X的结果如果正数 ...

  8. 移动端touch事件实现页面弹动--小插件

    动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...

  9. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

随机推荐

  1. 巧用Red Gate SQL Compare破解加密了的存储过程和函数

      最近项目中遇到了一个遗留系统的存储过程和函数被加密了,网上找了半天,解决办法倒是有,但需要写一大堆脚本, 怕影响原系统的运行,就说先同步到其他服务器上去破解.没想到,打开Sql Compare一比 ...

  2. 深入理解计算机系统第二版习题解答CSAPP 2.18

    将32位补码表示的数转换为10进制数. 32位补码 十进制 0x1b8 0x14 0xFFFFFE58 -424 0xFFFFFE74 -396 0x44 0xFFFFFEC8 -312 0x10 0 ...

  3. C++之类的析构函数

    一.认识析构函数 在我的前一篇博客介绍了类的构造函数.http://www.cnblogs.com/MrListening/p/5557114.html. 这里我们来简单说说类的析构函数,它是类的一个 ...

  4. Linux编程简介

    Linux编程可以分为Shell(如BASH.TCSH.GAWK.Perl.Tcl和Tk等)编程和高级语言(C语言,C++语言,java语言等)编程,Linux程序需要首先转化为低级机器语言即所谓的二 ...

  5. 基于Selenium2+Java的UI自动化(1) - 原理和环境搭建

    一.Selenium2的原理 Selenium1是thoughtworks公司的一个产品经理,为了解决重复烦躁的验收工作,写的一个自动化测试工具,其原理是用JS注入的方 式来模拟人工的操作,但是由于J ...

  6. SSRS集成至Web

    分几步进行,第一步要实现:IReportServerCredentials 接口第二步:拖入ReportViewer控件第三步:进行报表传参控制.具体如下图描述....代码部分参考下附件 using ...

  7. 类结构体 与 byte[] 转换类

    public static class StructConvert { public static object BytesToStruct(byte[] bytes, Type strcutType ...

  8. spark下测试akka的分布式通讯功能

    采用的spark版本为1.1.0 scala版本为2.10.4 编写scala类文件myactors.scala: package bluejoe import akka.actor._ import ...

  9. 序列化和反序列化(C#)

    有时候我们希望把类的实例保存下来,以便以后的时候用.一个直观的方法就是StreamWriter把类写成一行,用\t分隔开每个属性,然后用StreamReader读出来. 但是这样太麻烦,代码行数较多, ...

  10. Ext.Net学习笔记23:Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...