移动端的touch事件处理
简要的探讨一下移动端 touch 事件处理几个坑,以及相应的简单处理方法。
click 穿透
假设有个弹出层,上面有个关闭的按钮支持 touchend 触发后关闭,若正好下方有个元素支持 click 事件,在弹出层关闭后将会在下方元素触发 click 事件。这种效果肯定不是我们需要的,而且我们无法确定合适会在上方出现一个支持 touch 的弹出层,所以我认为最好的处理方式是禁用所有元素的 click 事件,相比 click 需要长达 1s 的触发时间,使用 touchend 可以获得更好的体验。
tap 事件的判定
一个正确的 tap 事件应当满足一下条件:
- 用户手指从屏幕移开时触发
- 不能在用户移动手指时触发(防止和滚动、拖拽事件的冲突)
- 多个手指同时触摸屏幕时不能触发
- 不应该触发 click 事件
具体实现代码可以参考 tap-event 。
使用原生的滚动事件
Android 4.0 以下是不支持原生的 webview 滚动的,所以只能使用 iscroll 之类的工具来模拟元素滚动。它的缺点就是有些过于的复杂,所以我还是会在条件允许的情况下使用原生的滚动。
启用原生滚动只需要给外层元素加上样式 -webkit-overflow-scrolling: touch;
即可,如果你的监听函数比较占用资源我们可以通过一个简单的 buffer 函数来限制它的触发间隔,例如:
function buffer(fn, ms) {
var timeout;
return function() {
if (timeout) return;
var args = arguments;
timeout = setTimeout(function() {
timeout = null;
fn.apply(null, args);
}, ms);
}
} document.querySelector('.scrollable').onscroll = buffer(onScroll, 100);
另外的建议就是不要在可滚动元素上使用阴影样式(text-shadow 和 box-shadow),因为它们非常影响性能,而且看上去也不怎么美观。
禁用页面整体拖动
默认情况下用户的拖动操作在scroll滚到头以后会导致整体页面的滚动,一种方式是禁用掉 document 的 touchmove 原生触发
events.bind(document, 'touchmove', function (e) {
e.preventDefault();
});
此时原生的滚动是无法工作的,解决办法就是禁用滚动元素的 touchmove 事件冒泡
events.bind(scrollable, 'touchmove', function (e) {
e.stopPropagation();
}
另一种方式是判定滚动元素滚到头之后禁用掉默认的处理
var el = document.querySelector('.scrollable');
var sy = 0;
events.bind(el, 'touchstart', function (e) {
sy = e.pageY;
}) events.bind(el, 'touchmove', function (e) {
var down = (e.pageY - sy > 0);
//top
if (down && el.scrollTop <= 0) {
e.preventDefault();
}
//bottom
if (!down && el.scrollTop >= el.scrollHeight - el.clientHeight) {
e.preventDefault();
}
})
我个人倾向于第二种方案,因为如果单纯的禁用 document 的 touchmove 监听,会导致一些处理的失效,比如说上面提到的 tap-event
模块。
拖动方向与距离
通过 event 的 pageX 和 pageY 属性即可计算,可参考 hammer.js
移动端的touch事件处理的更多相关文章
- Cocoa Touch事件处理流程--响应者链
Cocoa Touch事件处理流程--响应者链 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/9264335 转载请注明 ...
- Android touch事件处理流程
前面我们看了key事件的处理流程,相信大家对此已经有了新的认识,这篇文章我打算带领大家来看看稍微复杂些的touch 事件的处理流程.说它复杂是因为key事件本身就key down,up,long pr ...
- Android的Touch事件处理机制
Android的Touch事件处理机制比较复杂,特别是在考虑了多点触摸以及事件拦截之后. Android的Touch事件处理分3个层面:Activity层,ViewGroup层,View层. 首先说一 ...
- 移动端的touch click事件的理解+点透
移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart - ...
- 自定义View系列教程06--详解View的Touch事件处理
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- Html5新瓶装老酒之一--Touch事件处理
移动端的应用越来越多的开始采用html5来实现的.Html5有许多新特性需要开发者注意,比如css3,touch事件等等.比如做一个轮播图,分析其实现要领,有三点: 1.图片的轮播效果对应的css 样 ...
- 浅谈移动端之touch事件--手指的滑动事件
今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...
- 移动端 js touch事件
随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...
- 【转】IOS的处理touch事件处理(依照手指的移动移动一个圆,开发环境用的ios7,storyboard)-- 不错
原文网址:http://blog.csdn.net/baidu_nod/article/details/32934565 先看下页面的效果图: 首先定义这个ball它有两个属性和两个方法: @prop ...
随机推荐
- reason: -[UIKBBlurredKeyView candidateList]: unrecognized selector sent to instance
reason: -[UIKBBlurredKeyView candidateList]: unrecognized selector sent to instance 发现上线的app一直会有这个cr ...
- SqlSever基础 where 与 group by组合起来 处理数据
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- Bootstrap_基本HTML模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- django-crontab定时任务
django-crontab实现定时任务 1 django-crontab安装 django-crontab安装: django-crontab加入:只需要将INSTALLED_APPS即可.如下代码 ...
- [转老马的文章]MODI中的OCR模块
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2012.07.02更新:2012.07.09补充非简体中文版内容 自从基于MODI的DjVuToy.FreePic2Pdf. ...
- linux系统:rm-rf执行以后,怎么办?我来教你恢复文件。
记得我当时也犯过这个错误 rm -rf /* 傻傻的盯着屏幕看... 还好当时是在自己的虚拟机里,没什么数据,打镜像恢复回来就好了.今天看到这篇文章,备用!嗯 是的 万一哪天脑抽了 --------- ...
- Photoshop CS6 快捷键
1.工具箱 移动工具 [V]矩形.椭圆选框工具 [M]套索.多边形套索.磁性套索 [L]快速选择工具.魔棒工具 [W] 裁剪.透视裁剪.切片.切片选择工具 [C]吸管.颜色取样器.标尺.注释.12 ...
- [Effective Java]第三章 对所有对象都通用的方法
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Codeforces Round #237 (Div. 2) A
链接:http://codeforces.com/contest/404/problem/A A. Valera and X time limit per test 1 second memory l ...
- factory工厂模式之抽象工厂AbstractFactory
* 抽象工厂: 意图在于创建一系列互相关联或互相依赖的对象. * 每个工厂都会创建一个或多个一系列的产品 * 适用于:产品不会变动,开始时所有产品都创建好,然后根据分类获取想要的 某一类产品(很像sp ...