#Events

#Prevent bubbling

The miniapp provides no method to prevent event bubbling but uses different method properties to declare this purpose, such as the catchtap of the Smart MiniApp. Ray uses event.origin.stopPropagation to prevent bubbling.

import { View } from '@ray-js/ray';

export default function Page() {
  function handleFooClick(event) {
    event.origin.stopPropagation();
  }
  function handleBarClick() {
    // ...
  }
  return (
    <View onClick={handleBarClick}>
      bar
      <View onClick={handleFooClick}>foo</View>
    </View>
  );
}

When you tap the foo label, handleFooClick callback is invoked without handleBarClick being executed.