WeChat applet development event: catch---or bind---, bubbling event

The binding events in WeChat development include: bind** events such as bindtap and bindtouchstart, and catch** events such as catchtap and catchtouchstart.

The only difference between the two is bind and catch, and ** includes tap, touchstart, touchend, touchcancel, touchmove, and longtap events.

The bind series of event bindings will not prevent bubbling events from bubbling upwards, but the catch series of event bindings can prevent bubbling events from bubbling upwards.

First, an example is used to explain what is a bubbling event in a WeChat applet:

code show as below:

Here are the button events of the three components nested, click the outer view, execute the outertap event,

Click on the middle view, execute the outertap event and the middletap event,

Click on the inner view to execute the outertap event, middletap event and innertap event,

That is, when the button in the inner layer is clicked, the event in the outer layer will also trigger execution.

To solve this problem, you can use catchtap to bind events, and change the code to the following:

At this point, no matter which button is clicked, it will only execute one of its own events.