从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 会希望能先成为响应者；
我们可以利用“捕获期”来解决这一需求；
响应系统在从最底层的组件开始冒泡之前，会首先执行一个“捕获期”，在此期间会触发onShouldSetResponderCapture系列事件；
因此，如果某个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型结构相关。