手机的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 ...
随机推荐
- FloatingWindow
https://github.com/dev0x10/android-bubble https://github.com/dev0x10/FloatingView https://github.com ...
- petshop4.0 具体解释之中的一个(系统架构设计)
前言:PetShop是一个范例,微软用它来展示.Net企业系统开发的能力.业界有很多.Net与J2EE之争,很多数据是从微软的PetShop和Sun的PetStore而来.这样的争论不可避免带有浓厚的 ...
- 了解undefined、null、NaN的区别
1.常规的解释,null是个对象,表示空值,undefined也是个对象,表示没有定义 2.详细分析 null 书上的解释(Javascript权威指南),Javascript的关键词null是一种特 ...
- [Effective C++ --005]了解C++默默编写并调用哪些函数
<前言>编译器是个十分敬业的工作者,不但为你编译代码,甚至为你生成代码,不可思议吧.本文主要介绍编译器究竟会为我们生成和调用哪些代码. <空类和非空类>如果问什么样的类是空类? ...
- linux之Apache
apache 在linux下命令 2. 编译Apache 在src目录下 ./configure 可用 ./configure--help|less 得到帮助, make, make install ...
- 快速集成图片浏览器快速集成图片浏览器->MJPhotoBrowser的使用
介绍: 一个比较完整的图片浏览器,高仿了新浪微博的图片浏览效果,功能包括:下载浏览互联网图片,点击缩略图全屏显示图片.当加载较大图片时会出现圆形进度条,滑动浏览所有图片.保存图片到本地相册.GIF图片 ...
- 几本关于PHP安全的书
几本关于PHP安全的书: Essential PHP Security php architect‘s Guide to PHP Security Pro PHP Security Securing ...
- 深入理解计算机系统第二版习题解答CSAPP 2.11
在2.10中的inplace_swap函数的基础上,你决定写一段代码,实现将一个数组中的元素两端依次对调,你写出下面这个函数: void reverse_array(int a[], int cnt) ...
- smartctl工具应用(转载整理)
转载:https://linux.cn/article-4682-1.html Smartctl(S.M.A.R.T 自监控,分析和报告技术)是类Unix系统下实施SMART任务命令行套件或工具,它用 ...
- php中的匿名函数(Anonymous functions)和闭包函数(closures)
一:匿名函数 (在php5.3.0 或以上才能使用) php中的匿名函数(Anonymous functions), 也叫闭包函数(closures), 允许指定一个没有名称的函数.最常用的就是回调函 ...