移动端的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 ...
随机推荐
- 光耦PC817
光耦一共4个引脚,两个输入,两个输出. 输入接5v和gnd,5v接时加100欧姆电阻.输出不大于35v电压,这时输出端通路(只是通路,不是短路)
- VFL +AutoLayout
横竖屏事件响应(viewWillLayoutSubviews和通知)两种方式 http://blog.csdn.net/nogodoss/article/details/17246489 一,NSLa ...
- Android-activity-intent
package com.hanqi.myapplication; import android.content.ComponentName; import android.content.Intent ...
- Python串口编程
python的串口网上有很多例子,这里了只是把认为好的整理到一起. 首先,应该安装serial模块,还能开始后续的操作.我用的python2.6,serial模块可以在这里下载安装serial模块下载 ...
- ubuntu su 密码
Ubuntu的默认root密码是随机的,即每次开机都有一个新的root密码. Ubuntu刚安装后,不能在terminal中运行su命令,因为root没有默认密码,需要手动设定.以安装ubuntu时输 ...
- Debian8 远程登录Permission Denied,please try again
多数是系统没有开启Root登录的权限. 修改root的ssh权限: ① vi /etc/ssh/sshd_config ② 找到配置项PermitRootLogin 将此项的值改为yes ③ 重启ss ...
- python基础字符串操作
去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...
- x名称空间中的标记拓展
1.x:Type Type类可作为所有数据类型在编程层面上的抽象.在XAML中,如果想表达某个数据类型时就需要使用x:Type标记拓展.例子: 创建一个Button的派生类: using System ...
- Threejs 使用的3D格式
3D格式你可以通过任意软件导出(.3ds,dae等),但是threejs 无法使用, 1,http://www.blender.org/ 下载这款开源的3d软件 2,https://github.co ...
- CISCO VPN出现网关报错
今天尝试使用发现报错: 重启VPN服务即可