mobile touch事件
touch.js
众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的click事件。mobile上,自己又喜欢用zepto.js库(喜欢有时候就是一种先入为主的感觉),但是zepto-touch又不争气,有这那的问题(比如穿透什么的)。只好抛弃它,fastclick很好用,只是只有对click事件的加速,所以把tap.js的代码拿来自己改了改,增加了swipeleft和swiperight事件产生了touch.js。这样,我平时用的最多的tap,swipeleft,swiperight事件都齐活了。地址:https://github.com/lilyImage/touch/
原理
与所有的这类封装的touch事件一样,利用touchstart, touchmove, touchend,touchcancel,的组合,在touchstart的时候记录手指的x,y位置;在touchmove的时候同样记录手指的位置,然后利用差值来判断是tap吗?还是swipe?zepto-touch模块设置的是30的差值,也就是手指移动的位置与开始时候的手指位置的差值。在touch.js中设置的这个阈值是10。
(1)如果移动的距离绝对值没有超过10,认为是tap
(2)如果移动的距离在x方向上小于10,认为是swipeleft
(3)如果移动的距离在y方向上大于10,认为是swiperight
注: 没有判断y轴方向,可以加上y的判断,增加swipeup和swipedown事件
代码
大概100行的代码,简单易懂,具体源代码见github,重点说下核心部分,即自定义事件部分。
/**polyfill https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent*/
(function () {
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}; CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent;
})(); //touchName: 自定义的事件名
//bubbles : 是否支持冒泡
//cancelable : 是否支持事件被取消
var evt = new window.CustomEvent(touchName, {
bubbles: true,
cancelable: true
});
polyfill的存在是因为CustomEvent的dom4的规范,不一定所有的浏览器都支持,对于自定义事件的老式写法
// Create the event.创建事件
var event = document.createEvent('Event'); // Define that the event name is 'build'. 定义事件名为build
event.initEvent('build', true, true); // Listen for the event.监听事件
document.addEventListener('build', function (e) {
// e.target matches document from above
}, false); // target can be any Element or other EventTarget. 分发事件,对象可以是元素,也可以是其他的事件
document.dispatchEvent(event);
所以touch.js的事件处理过程如下:
(1)new 一个touch对象,把需要绑定自定义事件的el传进去
(2)el元素现在绑定了touchstart,touchmove, touchend等事件
(3)在touchstart的时候,记录手指的位置
(4)在touchmove的时候,计算手指的位置,并给出是tap还是swipe的标识
(5)在touchend的时候,创建相应的tap,swipeleft,swiperight自定义事件,并执行
兼容性
还没有具体的测试过在mobile上的兼容性,这还要看各平台浏览器对CustomEvent的实现,以及createEvent的支持情况,后续补充
android | 4.0 | 4.2 | 4.3 | |
测试通过 case : 4.0.3系统 |
测试通过 case:4.2.2 HTC802t 测试通过 浏览器版本webkit/534.30 |
测试通过 case:note2 |
基于zepto的touch,zepto-touch.js
在touch.js的基础上,衍生出了基于zepto的touch模块,zepto-touch.js
与zepto自己的touch模块相比,
(1)优点是:事件绑定在特定的元素上,而不是在document上;
(2)缺点:还不完善,暂时只有tap,swipeleft ,swiperight事件;后续慢慢完善
mobile touch事件的更多相关文章
- jquery mobile Touch事件
Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- js的touch事件的实际引用
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...
- 移动端 touch 事件的originalEvent
对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...
- javascript touch事件
touchstart : 當手指觸摸屏幕時觸發:即使已經有一個手指放在了屏幕上也會觸發. touchmove : 當手指在屏幕上滑動時連續的觸發,在這個事件發生期間,商用preventDefault( ...
- UC浏览器中touch事件的异常记录
以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
- 第六课 touch事件
1.移动端页面在PC上浏览时,限制宽度的方法: 2.移动端页面切换设备时自动刷新页面的方法: 3.touch事件 touchstart:当手指触摸屏幕时触发.通过addEventListener添加移 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
随机推荐
- 订阅Linux内核的邮件列表
1.发送订阅邮件 注意:一定不要使用像Foxmail这样的第三方邮件客户端,因为发送的邮件会转码,导致订阅不成功,推荐使用Gmail,直接登录进去发送. 发送邮件内容: 接收人:majordomo@v ...
- Entity Framework使用Sqlite时的一些配置
前段时间试着用Entity Framework for Sqlite环境,发现了一些坑坑洼洼,记录一下. 同时试了一下配置多种数据库,包括Sqlite.Sql Server.Sql Server Lo ...
- Viewprot meta学习笔记
viewprot屏幕尺寸,专为移动页面设计 参数 <meta name="viewport" content="height,width,initial-scale ...
- Dword、LPSTR、LPWSTR、LPCSTR、LPCWSTR、LPTSTR、LPCTSTR
DWORD:本来被定义为unsigned long,DWORD的含义就是双字,一个字是2字节,双字就是32字节. 但是在C/C++中,经常会用到把一个指针转换成数字储存,然后再将其传唤为指针调用.那么 ...
- linux编程开发命令
test命令命令功能test命令是shell环境中测试条件表达式的实用工具.命令语法test(选项)选项说明-b〈文件〉如果文件为一个块特殊文件,则为真;-c<文件〉,如果文件为一个字符特殊文件 ...
- 给linux添加yum源。
在玩linux的过程中,经常会下载一些源码包.软件大多是国外人写的,由于众所周知的原因,网络下载很慢. 所以想到了更新yum源的方法. 我的linux版本是CentOS6.3的. 以下参考百度. 1, ...
- BZOJ3813: 奇数国
传送门 欧拉函数+线段树 因为只有60个素数,所以把状态压成long long的形式.用线段树维护区间和和区间和中有多少个质数.然后xjb搞搞就行了,具体参见代码. //BZOJ 3813 //by ...
- hibernate......1、2级缓存
1.什么是缓存? 缓存是介于物理数据源与应用程序之间,是对数据库中的数据复制一份临时放在内存中的容器,其作用是为了减少应用程序对物理数据源访问的次数,从而提高了应用程序的运行性能.Hibernate在 ...
- NSRunLoop && NSTimer
新的一年的开始,希望大家一切越来越好,越来越开心快乐!!! 定时器及运行循环 NSRunLoop是iOS消息机制的处理模式 NSRunLoop的主要作用:控制NSRunLoop里面线程的执行和休眠,在 ...
- SQL Server 2012 学习笔记2
1. 新建数据库 可以在对应目录下右键新建数据库,也可以用程序添加: 先打开程序编辑对话框"New Query" create database Library 2. 添加表格 可 ...