简要的探讨一下移动端 touch 事件处理几个坑,以及相应的简单处理方法。

click 穿透

假设有个弹出层,上面有个关闭的按钮支持 touchend 触发后关闭,若正好下方有个元素支持 click 事件,在弹出层关闭后将会在下方元素触发 click 事件。这种效果肯定不是我们需要的,而且我们无法确定合适会在上方出现一个支持 touch 的弹出层,所以我认为最好的处理方式是禁用所有元素的 click 事件,相比 click 需要长达 1s 的触发时间,使用 touchend 可以获得更好的体验。

tap 事件的判定

一个正确的 tap 事件应当满足一下条件:

  1. 用户手指从屏幕移开时触发
  2. 不能在用户移动手指时触发(防止和滚动、拖拽事件的冲突)
  3. 多个手指同时触摸屏幕时不能触发
  4. 不应该触发 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事件处理的更多相关文章

  1. Cocoa Touch事件处理流程--响应者链

    Cocoa Touch事件处理流程--响应者链 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/9264335 转载请注明 ...

  2. Android touch事件处理流程

    前面我们看了key事件的处理流程,相信大家对此已经有了新的认识,这篇文章我打算带领大家来看看稍微复杂些的touch 事件的处理流程.说它复杂是因为key事件本身就key down,up,long pr ...

  3. Android的Touch事件处理机制

    Android的Touch事件处理机制比较复杂,特别是在考虑了多点触摸以及事件拦截之后. Android的Touch事件处理分3个层面:Activity层,ViewGroup层,View层. 首先说一 ...

  4. 移动端的touch click事件的理解+点透

    移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart - ...

  5. 自定义View系列教程06--详解View的Touch事件处理

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  6. Html5新瓶装老酒之一--Touch事件处理

    移动端的应用越来越多的开始采用html5来实现的.Html5有许多新特性需要开发者注意,比如css3,touch事件等等.比如做一个轮播图,分析其实现要领,有三点: 1.图片的轮播效果对应的css 样 ...

  7. 浅谈移动端之touch事件--手指的滑动事件

    今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...

  8. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  9. 【转】IOS的处理touch事件处理(依照手指的移动移动一个圆,开发环境用的ios7,storyboard)-- 不错

    原文网址:http://blog.csdn.net/baidu_nod/article/details/32934565 先看下页面的效果图: 首先定义这个ball它有两个属性和两个方法: @prop ...

随机推荐

  1. 六、IO流——文件

    IO流1.字节流(InputStream.OutputStream)2.字符流 (Reader.Writer)3.缓冲流(BufferedInputStream.BufferedOutputStrea ...

  2. js修改浏览器url

    var stateObject = {};var title = "";var newUrl = "/";history.pushState(stateObje ...

  3. SqlSever基础 datediff 计算两个时间相差多少年份

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. 新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了

    新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了 <!DOCTYPE html> <html> <hea ...

  5. 【转载】跟着9张思维导图学习JavaScript

    原文:跟着9张思维导图学习JavaScript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 JavaScript相关的思维导图(非原创). 思维导图小ti ...

  6. head标签掉到body里的问题

    HTML最开始的标签   <!DOCTYPE html>在其之前不能有任何的内容,否则head里的内容就会掉到body里,导致譬如网站的图标icon无法更新等的功能问题

  7. 并行parallel和并发concurrent的区别

    http://stackoverflow.com/questions/1050222/concurrency-vs-parallelism-what-is-the-difference Concurr ...

  8. CUBRID学习笔记 15 Lobs类型数据

    BLOB: Binary large object CLOB: Character large object 一个二进制 一个字符类型 二进制的读取 CUBRIDCommand cmd = new C ...

  9. STL区间成员函数及区间算法总结

    STL区间成员函数及区间算法总结 在这里总结下可替代循环的区间成员函数和区间算法: 相比单元素遍历操作,使用区间成员函数的优势在于: 1)更少的函数调用 2)更少的元素移动 3)更少的内存分配 在区间 ...

  10. HDU 5422 Rikka with Graph

    Rikka with Graph Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...