uniapp prevents events from bubbling

In UniApp, the way to prevent events from bubbling is similar to ordinary front-end development. You can use the @click.stopor @tap.stopevent modifier to prevent further propagation of events.

The following is an example of preventing event bubbling in UniApp:

<template>
  <view>
    <button @click="outerClick">外部按钮</button>
    <button @click.stop="innerClick">内部按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log("外部按钮被点击");
    },
    innerClick() {
      console.log("内部按钮被点击");
    }
  }
};
</script>

 

In the above example, @click.stopthe modifier prevents the event from bubbling when the inner button is clicked, so the click event of the outer button is not triggered.

stopSimilarly, you can also use modifiers on other events , such as @touch.move.stop, @touch.start.stopetc., to prevent event bubbling according to specific event types.

It should be noted that the event modifiers in UniApp are used in the same way as ordinary Vue.js event modifiers, so you can refer to the Vue.js documentation to learn more about the usage of event modifiers.