javascript - Prevent parent from being clickable while allowing child to capture touches - Stack Overflow

admin管理员组

文章数量:1388046

In react-native sometimes it is useful to prevent a parent from capturing and handling touch / click events while allowing its children to receive and react to the events. Specifically, this is useful when using a <View/> or <ImageBackground/> container that acts as a transparent background to its child elements (example: gradient based shadows or wrapper views used to center elements of absolute positioning).

In react-native sometimes it is useful to prevent a parent from capturing and handling touch / click events while allowing its children to receive and react to the events. Specifically, this is useful when using a <View/> or <ImageBackground/> container that acts as a transparent background to its child elements (example: gradient based shadows or wrapper views used to center elements of absolute positioning).

• javascript
• css
• reactjs
• react-native
• mobile

Share Improve this question Follow asked Mar 22, 2018 at 4:00 Wassim GrWassim Gr 59822 gold badges88 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

React Native offers a pointerEvents prop for <View/> elements which can be set to 'none' in order to stop reacting to touches and clicks, however the trick to allowing the children to still be touchable is to set the pointerEvents prop to 'box-none' instead of 'none'.

Warning: In contrast to regular CSS, pointerEvents is ` prop and not a style. So to use it, you can do

<View style={styles.parentWithoutTouchEvents} pointerEvents='box-none'>
   <View style={styles.touchableChild}>
   </View>
</View>

本文标签： javascriptPrevent parent from being clickable while allowing child to capture touchesStack Overflow