React Native SyntheticEvent合成事件

[1uokun]

onStartShouldSetResponder={()=>true}

只有onStartShouldSetResponder返回为true，才会触发onResponderXXX事件，否则不会触发；
缺点是会导致 child 如果不也开启 onStartShouldSetResponder={()=>true}就不能被响应任何事件，包括onScroll。

onTouchXXX事件没有这个限制，但是必须是移动端模式，PC模式需要借助hammer-touchemulatornpm包模拟触发。

事件冒泡

停止冒泡事件类型是一一对应的，事件类型不一致时无法阻止。

child onStartShouldSetResponder & onPress 对应 parent onStartShouldSetResponder & onResponderXXX

<View
  onStartShouldSetResponder={() => {
    // not work by child onStartShouldSetResponder true
  }}
  onResponderEnd={() => {
    // not work by child onStartShouldSetResponder true
  }}
  onTouchEnd={()=>{
   // still works
  }}
>
  <View onStartShouldSetResponder={() => true} />
</View>

child onPress

<View
  onStartShouldSetResponder={() => true}
  onResponderEnd={() => {
    // not work by child stopPropagation
  }}>
  <Button
    onPress={(e) => {
      e.stopPropagation()
    }}
    title="btn"
  />
</View>

onTouchEnd 对应 onTouchEnd

<View
  onTouchEnd={() => {
    // not work by stopPropagation
  }}>
  <View
    onTouchEnd={(e) => {
      e.stopPropagation()
    }}
  />
</View>

事件捕获

默认事件冒泡响应顺序是从上到下的，即从target到root的

因此要想先执行root的，可以借助xxxCapture事件捕获

当root的onStartShouldSetResponderCapture返回为true时，child将不响应任何onResponderXXX

<View
  onStartShouldSetResponderCapture={() =>  true}
>
  <View 
    onStartShouldSetResponder={() =>{
        // not work by parent capture
    }}
  />
</View>

同理，当root的onTouchEndCapture执行preventDefault时，child将不响应onTouchEnd

<View
  onTouchEndCapture={(e) => {
      e.preventDefault()
  }}
>
  <View 
    onTouchEnd={() =>{
        // not work by parent preventDefault
    }}
  />
</View>