Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the bubbling event in WeChat Mini Programs". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn "how to realize the bubbling event in WeChat Mini Programs"!

WeChat Mini Programs's events can be divided into bubbling events and non-bubbling events:

Bubbling event: when an event on a component is triggered, the event is passed to the parent node.

Non-bubbling event: when an event on a component is triggered, the event is not passed to the parent node.

List of bubbling events for WXML:

Type trigger condition minimum version touchstart finger touch action starts

Touchmove moves after touching his finger

Touchcancel finger touch is interrupted, such as call reminder, pop-up window

Touchend finger touch action ends

Tap left immediately after touching his fingers.

After longpress finger touch, exceed 350ms before leaving. If event callback function is specified and this event is triggered, tap event will not be triggered after 1.5.0longtap finger touch, and then leave after 350ms (longpress event is recommended)

Transitionend is triggered after the end of the WXSS transition or wx.createAnimation animation

Animationstart is triggered at the beginning of a WXSS animation animation

Animationiteration is triggered at the end of an iteration of a WXSS animation

Animationend will be triggered when a WXSS animation animation is complete

Touchforcechange on iPhone devices that support 3D Touch, 1.9.90 will be triggered on time.

Note: other component custom events except the above table are non-bubbling events without special declaration, such as form's submit event, input's input event, scroll-view 's scroll event, (see each component for details)

Event binding

Start with bind or catch, and then follow the type of event, such as bindtap, catchtouchstart. Since the base library version 1.5.0, in non-native components, bind and catch can be followed by a colon with the same meaning, such as bind:tap, catch:touchstart.

Condition for event bubbling: the parent element and child element are bound to the same kind of event and the child element is bound with bind (catch will prevent event bubbling at the beginning). The code is as follows:

Outer view middle view inner view tap1: function (e) {console.log (1, e)}, tap2: function (e) {console.log (2, e)}, tap3: function (e) {console.log (3)}

Clicking id is the element of inner, and it also triggers the element whose id is middle and outter.

Changing inner's bindtap to catchtap will prevent the event from bubbling.

Thank you for your reading. the above is the content of "how to realize the bubbling event in WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how to realize the bubbling event in WeChat Mini Programs. The specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.