---
title: 事件
summary: "介绍 Ray 中通过 event.origin.stopPropagation 阻止事件冒泡的方法。"
tags: [Ray事件处理, event.origin.stopPropagation阻止冒泡, 小程序事件绑定]
questions:
  - Ray 中如何阻止事件冒泡？
  - 为什么 Ray 不能直接用 event.stopPropagation 而要用 event.origin.stopPropagation？
  - 小程序的 catchtap 在 Ray 中怎么实现等效效果？
  - Ray 中点击子元素如何防止父元素的点击事件也被触发？
  - event.origin 是什么？和普通的 event 对象有什么区别？
---

# 事件

## 阻止冒泡

由于小程序本身没有阻止事件冒泡的方式，而是采用不同的方法属性来声明阻止冒泡（如 智能小程序的 `catchtap`）， `Ray` 需要通过 `event.origin.stopPropagation` 阻止冒泡。

```jsx | sandbox
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>
  );
}
```

当您点击 `foo` 标签时，将会触发 `handleFooClick` 回调，但不会执行 `handleBarClick`。