从Click理解移动端App开发

当前移动端App开发分为Native(原生)开发和Hybrid(混合)开发;

现在通过移动端App的点击事件来进行探究:

HTML

对于通过HTML构建的网页,Click作为一个事件本身与其他事件相同是浏览器窗口中发生、特定交互瞬间,成为js与DOM之间交互的桥梁;

事件流从window开始到具体的DOM tree(Document Object Model Tree)的顶层节点进行事件的捕获,在节点确定目标后再通过冒泡回溯document.addEventListener(event, function, useCapture),若不使用document.stopPropagation()进行事件拦截就会导致某事件会触发parent层级的相应事件。

微信小程序的事件机制与HTML类似。

React Native

在RN中有很多View组件,只要实现了正确的Responder方法,就可以成为触摸事件的响应者;

View.props.onStartShouldSetResponder: (evt) => true,在用户开始触摸的时候(手指刚刚接触屏幕的瞬间),是否愿意成为响应者?

View.props.onMoveShouldSetResponder: (evt) => true,如果 View 不是响应者,那么在每一个触摸点开始移动(没有停下也没有离开屏幕)时再询问一次:是否愿意响应触摸交互呢?

View.props.onResponderGrant: (evt) => {} - View,现在要开始响应触摸事件了。这也是需要做高亮的时候,使用户知道他到底点到了哪里;

View.props.onResponderReject: (evt) => {},响应者现在"另有其人"而且暂时不会"放权",请另作安排;

onStartShouldSetResponder与onMoveShouldSetResponder是以冒泡的形式调用的,即嵌套最深的节点最先调用;

这意味着当多个 View 同时在ShouldSetResponder中返回 true 时,最底层的 View 将优先"夺权";
但是有些时候,某个parent View 会希望能先成为响应者;
我们可以利用"捕获期"来解决这一需求;
响应系统在从最底层的组件开始冒泡之前,会首先执行一个"捕获期",在此期间会触发on
ShouldSetResponderCapture系列事件;

因此,如果某个parent View 想要在触摸操作开始时阻止child组件成为响应者,那就应该处理onStartShouldSetResponderCapture事件并返回 true 值;

View.props.onStartShouldSetResponderCapture: (evt) => true;

View.props.onMoveShouldSetResponderCapture: (evt) => true。

Flutter

Flutter有自己的Engine,这导致Flutter在各平台上都能很好的兼容;

Flutter Engine是基于Dart Runtime环境(UI、GPU、I/O线程,还有原生Platfrom线程),Dart Runtime会首先创建和启动DartVM虚拟机,DartIsolate会初始化并启动一个DartIsolate,启动流程的最后会执行main(),执行runApp(),获得WidgetsBinding单例对象;

其中GestureBinding负责手势处理,提供了window.onPointerDataPacket回调,绑定Framework手势子系统,是Framework事件模型与底层事件的绑定入口;

Flutter内部的组件是tree型结构,handlePointerEvent处理具体手势,通过调用GestureBinding._handlePointerEventImmediately实现,这个方法是为了进行命中测试找到可以处理事件的组件;

发起命中测试RendererBinding.hitTest(parent组件的hitTest中会调用child组件的hitTest,所以若child组件通过命中测试将会添加在parent组件前)将可以被响应的RenderObject对象添加进队列保存下来;

接下来进行事件分发GestureBinding.dispatchEvent,内部是顺序执行handleEvent;

最终保证了最顶层的通过命中测试的组件去执行对应的event。

iOS

继承了UIResponser的对象:UIApplication、UIWindow、UIViewController、UIView、UIButton、UILabel;

通过UITouch方法处理和传递UIEvent;

open func touchesBegan(_ touches: Set, with event: UIEvent?);

open func touchesMoved(_ touches: Set, with event: UIEvent?);

open func touchesEnded(_ touches: Set, with event: UIEvent?);

open func touchesCancelled(_ touches: Set, with event: UIEvent?);

当屏幕收到触摸信号,此时拥有的信息是触摸点的坐标,需要找到第一响应者来响应触摸;

系统将点击事件加入到UIApplication管理的消息队列里;

UIApplication会从消息队列中取出该事件传递给UIWindow;

在UIWindow中调用方法hitTest:withEvent:,在方法中调用pointInside:withEvent:来判断触摸点的坐标是否在UIWindow内部;

若返回YES,则倒序遍历子视图找到最终响应的子UIResponer;

若最终返回一个UIResponer,那么最终响应UIResponer并结束事件传递,如果无值返回则将UIWindow作为响应者。

Android

安卓的触摸事件(MotionEvent)也有一套响应链,层级是通过Activity到ViewGroup到View;

dispatchTouchEvent()负责将事件分发给子视图或自己处理;

onInterceptTouchEvent()只在ViewGroup中才有,用于拦截事件,决定是否传递给子视图;

onTouchEvent()负责处理事件,返回true表示消费了事件,false则相反。

当前移动端App使用的事件传递使用的是一套类似的链式结构,这与屏幕组件是tree型结构相关。

相关推荐
史努比.4 小时前
redis群集三种模式:主从复制、哨兵、集群
前端·bootstrap·html
天高任鸟飞dyz4 小时前
html加载页面
css·html·css3
miao_zz5 小时前
基于HTML5的下拉刷新效果
前端·html·html5
AiFlutter5 小时前
Flutter之Package教程
flutter
重生之我在20年代敲代码5 小时前
HTML讲解(一)body部分
服务器·前端·html
陈小唬5 小时前
html页面整合vue2或vue3
前端·vue.js·html
18资源6 小时前
H5白色大方图形ui设计公司网站HTML模板源码
前端·javascript·html
Jouzzy6 小时前
【Android安全】Ubuntu 16.04安装GDB和GEF
android·ubuntu·gdb
极客先躯7 小时前
java和kotlin 可以同时运行吗
android·java·开发语言·kotlin·同时运行
sqll5677 小时前
最新简洁大方的自动发卡网站源码/鲸发卡v11.61系统源码/修复版
前端·开源·html