Use UniApp framework to prevent events from bubbled

1. What is event bubble?

Before we start discussing how to stop events from bubbled up, let’s first look at what event bubbled up.

Event bubble means that in the DOM tree, when an event on an element is triggered, it will be passed along the parent element to the upper layer until the root element. This transmission process is like a bubble popping out of the bottom of the water, so it is called event bubbles.

In uni-app, event bubbles are when an event on a component is triggered, if the component has a parent component, the event is passed along the component tree to the upper layer until the root component. The advantage of this is that you can listen to events of children in the parent component and handle them accordingly.

2. Event bubbles in UniApp

UniApp is a cross-platform mobile application development framework, based on and WeChat applets. In UniApp, we can use event modifiers to prevent events from bubbling. Event modifiers are a special syntax that can be used to modify the behavior of events.

In UniApp, event bubbles are enabled by default. When an event on a component is fired, if the component has a parent component, the event is passed along the component tree to the upper layer until the root component. The advantage of this is that you can listen to events of children in the parent component and handle them accordingly.

For example, when a button is clicked, the button's click event is fired and is passed along the parent component to the upper layer until the root component. In each layer of components, the corresponding logic can be handled by listening to events. This allows interaction and communication between components.

It should be noted that event bubbles can be prohibited by setting the event's bubbles attribute to false. If set to false, the event is no longer passed to the upper layer and will only be processed in the current component.

3. How to stop events from bubbled

To prevent events from bubbling, we can use event modifiers in event handlers. Here are some commonly used event modifiers:

• stop: prevents the event from continuing to propagate, which is equivalent to calling the () method.
• .prevent: The default behavior of blocking events is equivalent to calling the() method.
• .capture: Use event capture mode, that is, propagate events downward from the root node.
• .self: Event handling function is called only when the event is triggered on the current element itself.

4. Sample code

• Here is a sample code that demonstrates how to prevent events from bubbled in UniApp:

<template>
  <view>
    <button @tap="handleButtonTap">Button</button>
    <view @="handleViewTap">
      <text>This is a view</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleButtonTap() {
      ('Button was clicked');
    },
    handleViewTap() {
      ('View was clicked');
    },
  },
};
</script>

In the above code, when the button is clicked, only the handleButtonTap method is triggered, not the handleViewTap method. This is because we use the .stop modifier on the @tap event of the view, preventing the event from bubbled.

In UniApp, you can use the .prevent modifier to prevent event bubbles and default behavior. The .prevent modifier can be used in event binding in templates.

• The sample code is as follows:

<template>
  <view @click="handleParentClick">
    <view @="handleChildClick">
      Subcomponents
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      ('The parent component is clicked');
    },
    handleChildClick() {
      ('Subcomponents are clicked');
    }
  }
}
</script>

In the above code, when the child component is clicked, the handleChildClick method is triggered, and the .prevent modifier is used to prevent event bubbles and default behavior. Therefore, the click event of the parent component will not be triggered, and the default click behavior will not be triggered.

It should be noted that the .prevent modifier can only prevent the bubbling and default behavior of the current event, and cannot prevent the bubbling and default behavior of other events. If you need to prevent both event bubbles and default behavior, you can call the() and () methods in the event handling function.

In UniApp, you can use the .capture modifier to prevent events from bubbled. The .capture modifier can be used in event bindings in templates.

• The sample code is as follows:

<template>
  <view @="handleParentClick">
    <view @click="handleChildClick">
      Subcomponents
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      ('The parent component is clicked');
    },
    handleChildClick() {
      ('Subcomponents are clicked');
    }
  }
}
</script>

In the above code, when the child component is clicked, the handleChildClick method is triggered, and the .capture modifier is used to prevent the event from bubbled. Therefore, the click event of the parent component will not be triggered.

It should be noted that the .capture modifier can only prevent the event from bubbled up and cannot prevent the default behavior of the event. If you need to prevent both event bubbles and default behavior, you can call the() and () methods in the event handling function.

In UniApp, you can use the .self modifier to prevent events from bubbling. The .self modifier can be used in event binding in templates.

• The sample code is as follows:

<template>
  <view @="handleParentClick">
    <view @click="handleChildClick">
      Subcomponents
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      ('The parent component is clicked');
    },
    handleChildClick() {
      ('Subcomponents are clicked');
    }
  }
}
</script>

In the above code, when the child component is clicked, the handleChildClick method is triggered, and the .self modifier is used to prevent the event from bubbled. Therefore, the click event of the parent component will not be triggered.

It should be noted that the .self modifier can only prevent the event from bubbled up and cannot prevent the default behavior of the event. If you need to prevent both event bubbles and default behavior, you can call the() and () methods in the event handling function.

5. Conclusion

By using event modifiers provided by the UniApp framework, we can conveniently prevent events from bubbling, thus achieving a better user interaction experience. When developing mobile applications, it is very important to understand how to prevent events from bubbling, and hopefully this article will help you better understand and apply this concept.

The above is the detailed content of using the UniApp framework to prevent events from bubbled. For more information about UniApp preventing events from bubbled, please follow my other related articles!