手机的touch事件(基于jquery)
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)的更多相关文章
- 简易封装手机浏览器touch事件
做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...
- 手机触摸touch事件
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
- 手机touch事件及参数【转】(自己懒得写了,找了一篇摘过来)
[html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...
- Touch事件or手机卫士面试题整理回答(二)
Touch事件or手机卫士面试题整理回答(二) 自定义控件 1. Touch事件的传递机制 顶级View->父View->子View,不处理逆向返回 OnInterceptTouchEve ...
- Zepto.js touch模块深入分析 解决手机点击事件
源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...
- jquery mobile Touch事件
Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...
- Android基于mAppWidget实现手绘地图(九)–如何处理地图对象的touch事件
为了响应touch事件,需要设置OnMapTouchListener 示例: private void initMapEventsListener() { mapWidget.setOnMapTouc ...
- JS事件监听手机屏幕触摸事件 Touch
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- 移动端笔记——jQuery touch事件
判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("A ...
随机推荐
- UVA 12627 - Erratic Expansion
一个红球能够分裂为3个红球和一个蓝球. 一个蓝球能够分裂为4个蓝球. 分裂过程下图所看到的: 设当前状态为k1.下一状态为k2. k1的第x行红球个数 * 2 ⇒ k2第2*x行的红球个数. k1的第 ...
- 给定表达式[x/2] + y + x * y, 其中x,y都是正整数。
改进了一下,不过还是要十多秒吧. package com.boco.study; import java.math.BigDecimal; import java.util.Calendar; imp ...
- careercup-C和C++ 13.4
13.4 深拷贝和浅拷贝有什么区别,如何使用? 解答 浅拷贝并不复制数据,只复制指向数据的指针,因此是多个指针指向同一份数据. 深拷贝会复制原始数据,每个指针指向一份独立的数据.通过下面的代码, 可以 ...
- C# 指针(unsafe与fixed的使用)
c#在默认情况下生成的都是安全代码,即进行了代码托管(.NET的CLR机制好处之一是,进行代码托管,适时的释放内存,程序员便不必考虑资源的回收问题),而此时,指针不能出现在安全代码的编译条件下. 一. ...
- iOS利用代理实现界面跳转
引入代理类头文件和要跳转到的界面头文件 -(void)aaa { //可以插入动画 LYXViewControllor * view = [LYXViewControllor new]; LYXDel ...
- iOS之Git的使用
1.登录Git账号,创建一个新的仓库
- Linux系统故障处理案例(一)
运行环境:CentOS6.7 故障原因: 昨天在线执行命令yum -y update 在命令执行途中,强制中断并直接运行poweroff命令关机.再次开机出现如图所示故障指示: 根据提示信息分析,可能 ...
- posix thread互斥量
互斥量 互斥量(Mutex)是“mutual exclusion”的缩写.互斥量是实现线程同步,和保护同时写共享数据的主要方法.使用互斥量的典型顺序如下:1. 创建和初始一个互斥量 2. 多个线程尝试 ...
- Spring Boot 获取ApplicationContext
package com.demo; import org.springframework.beans.BeansException; import org.springframework.contex ...
- Javascript日期处理类库Moment.js
1.组件详情地址Moment.js中文网 http://momentjs.cn/ 2.几个方法: (1) 日期格式化 moment().format(); // 2016-02-29T14:03:30 ...