javascript代码:

$.swipe=function(opt){
  var o = $.extend({
    mainSelector:"",
    swipeLeft:function(e,v){},
    swipeRight:function(e,v){},
    swipeEnds:function(v,e){}
}, opt || {});
  var startX=0,startY=0;
var obj={
    touchStart: function (e){
        var touchx= e.touches[0].pageX;
        var touchy= e.touches[0].pageY;
        startX = parseInt(touchx,10);
        startY = parseInt(touchy,10);
    },
    touchMove:function(e){
        var touchmx= e.touches[0].pageX,
        touchmy= e.touches[0].pageY,
        dirX=parseInt(touchmx-startX,10);
        dirY=parseInt(touchmy-startY,10);
        if(dirX<0){
            o.swipeLeft(e,dirX);
        }else{
           o.swipeRight(e,dirX);
        }
        
        if(dirY<0){
            o.swipeTop(e,dirY);
        }else{
            o.swipeBottom(e,dirY);
        }
    },
    touchEnd:function(e){
       o.swipeEnds(e);
    },
    bindEvent:function(els){
        var elem=$(els);
        for(var i=0,_len=elem.length;i<_len;i++){
          elem[i].addEventListener('touchstart', obj.touchStart, false);
          elem[i].addEventListener('touchmove', obj.touchMove, false);
          elem[i].addEventListener('touchend', obj.touchEnd, false);
        }
    }
};
obj.bindEvent(o.mainSelector);
return obj;}; 
 

传入的是选择器和swipeLeft,swipeRight的回调事件

手机的touch事件(基于jquery)的更多相关文章

  1. 简易封装手机浏览器touch事件

    做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...

  2. 手机触摸touch事件

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  3. 手机touch事件及参数【转】(自己懒得写了,找了一篇摘过来)

    [html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...

  4. Touch事件or手机卫士面试题整理回答(二)

    Touch事件or手机卫士面试题整理回答(二) 自定义控件 1. Touch事件的传递机制 顶级View->父View->子View,不处理逆向返回 OnInterceptTouchEve ...

  5. Zepto.js touch模块深入分析 解决手机点击事件

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...

  6. jquery mobile Touch事件

    Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...

  7. Android基于mAppWidget实现手绘地图(九)–如何处理地图对象的touch事件

    为了响应touch事件,需要设置OnMapTouchListener 示例: private void initMapEventsListener() { mapWidget.setOnMapTouc ...

  8. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  9. 移动端笔记——jQuery touch事件

    判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("A ...

随机推荐

  1. careercup-C和C++ 13.6

    13.6 基类的析构函数为何要声明为virtual? 解答: 用对象指针来调用一个函数,有以下两种情况: 如果是虚函数,会调用派生类中的版本. 如果是非虚函数,会调用指针所指类型的实现版本. 析构函数 ...

  2. php测试代码工具类

      <?php error_reporting (E_ALL); ini_set ('display_errors', 'on'); ?> <meta http-equiv=&quo ...

  3. Dashboards (Android)

    his page provides information about the relative number of devices that share a certain characterist ...

  4. 如何强化 TCP/IP 堆栈

    TCP/IP 是一种本质上不安全的协议.但是,Windows 2000 实现可以使您配置其操作以防止网络的拒绝服务攻击.默认情况下,本文中所涉及的一些项和值可能并不存在.在这些情况下,请创建该项.值或 ...

  5. 数据结构及算法分析(0)——引论

          引论提到算法递归的概念,递归在很多算法中都会出现.所谓递归,当一个函数用它自己来定义的时候就称为递归.     递归调用有两大要素: 基准情况. 递归调用.     并非所有的数学递归函数 ...

  6. 圆满完成Web安全测试培训课程广州公开班!

    圆满完成Web安全测试培训课程广州公开班! http://gdtesting.com/news.php?id=187 下期<Web安全测试最佳实践>公开课通知:8月9.10日地点:广州 课 ...

  7. linux系统下搭建自己的web服务器

    之前在windows 2008 server上搭建了一个用于测试的web服务器,但是在打开网站的时候特别的慢,尤其是图片的加载都会失败,当时以为是路径的问题,但是在服务器上自己打开都特别慢,自己实在找 ...

  8. 【itclx面向对象一】tcl基础语法:过程、作用域、以及itcl面向编程回顾

    学习熟悉编程的最好方法就是动手,有点面向编程思维的话,直接练习就可以.直接看demo 1.过程.作用域 #全局变量:过程外定义的变量#局部变量: 过程内部定义的变量 set a 100proc tes ...

  9. 【转载】Git的安装与使用

    Git的安装与使用  转载来源:http://www.cnblogs.com/Bonker/p/3441781.html 1,下载git https://code.google.com/p/msysg ...

  10. jquery mobile 移动web

    轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...