移动端的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 属性即可计算,
转载于:https://www.cnblogs.com/susanws/p/5399323.html
移动端的touch事件处理相关推荐
- 关于移动端的touch事件(touchstart, touchmove, touchend,touchcancel)
移动端的touch事件 四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchc ...
- 移动端的touch事件详解
移动端的touch事件 触摸事件的起源 随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动 ...
- 移动端开发-touch事件及其相关属性
1. 为什么移动端使用touch事件 习惯在电脑上写js代码的同学可能想问一个问题:为什么移动端要使用touch事件,mouse事件和click事件在手机上不能触发么?其实这个问题很容易解决.首先,这 ...
- Cocos2d-x Touch事件处理机制(better)
from http://www.2cto.com/kf/201308/236359.html 注:下面这位同学对于cocos2d-x 2.x中的触摸机制分析简直可以说是清晰到家了. 重要补充: 下面这 ...
- 移动端html右滑空白,移动端之touch事件_上滑、下滑、左滑和右滑
开发app的前端框架有哪些 移动 原理:第一,当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY:第二,当触发touchmove事件时,在获取此时手指的横坐 ...
- 「移动端」touch事件,touchEvent对象
随着智能手机普及,有越来越多的手机网页和网页版游戏,手机触摸.移动.旋转等等,多种操作.一般电脑的人机交互靠的是鼠标,而手机用的就是触摸.区别有: PC 端一个电脑只能有一个鼠标,而移动端有多点触摸. ...
- 移动端-webkit-overflow-scrolling:touch属性导致页面卡住
故事的起因是,在一个多列表的页面上,页面在iOS11,跟iOS10中会发生页面卡住,不能进行滚动.然后就怀疑是自己的样式写的出了问题,就一直排查定位元素的样式,怎么都找不到问题所在.但还是本着追根溯源 ...
- Android之滑动事件冲突解决 Touch事件处理机制总结
android中的事件类型分为按键事件和屏幕触摸事件,Touch事件是屏幕触摸事件的基础事件,有必要对它进行深入的了解. 一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN- ...
- Android中的Touch事件处理流程
1.当触摸屏幕时,最先执行的是Activity中的 public boolean dispatchTouchEvent (MotionEvent ev) { if (ev.g ...
最新文章
- bme280 环境传感器开发板_盘一盘那些年我们常用的物联网开发板!
- keras从入门到放弃(十八)批量标准化
- mysql递归层次查询
- 【BZOJ3524】 [Poi2014]Couriers
- matlab之结构体的创建与存储(CSV数据)
- 广告创意还是侮辱女性?全棉时代卸妆巾广告被骂上热搜......
- 罗永浩“卖艺”还债能成?邀约不断,币圈抢着送钱
- 毕设日志——RCNN
- [贪心算法] 例6.1 FatMouse' Trade
- centos光盘修复引导_CentOS 6.5 修复grub引导
- 解决luyten 启动报错:this application requires a java runtime
- html添加java代码_在HTML中插入JSP代码
- PDF怎么编辑修改文字?
- 跨站点请求伪造攻击的原理及防御
- jquery php 分页插件,JQ分页插件
- 【博学谷学习记录】超强总结,用心分享丨一款钻戒网站的html、css
- Excel PivotTable 使用心得手顺分享(一)
- 我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:JVM的发展历程
- 于二〇〇八年十一月二十六日有所思而作
- 工欲善其事必先利其器--MyEclipse
热门文章
- Stanley-系列三
- [深度学习-实践]人脸识别的例子-Tensorflow2.x Keras
- syn重发_什么是“SYN”请求?ISN又是什么?
- 声纹识别中的召回和精度概念
- leetcode - 416. 分割等和子集
- HttpRequestUtil用于URL请求(网络爬虫)
- MapDB的使用实战[基于Java的数据库]
- Jetson TX2板载相机opencv调用打开
- 微信小程序 【笔记003】小程序的事件处理
- 【实践驱动开发3-003】TI WL1835MODCOM8 在android的移植 - 软件获取2