Event modifier

Last time we learned about event handlers: V-ON:

What we’re going to do in this lesson is add some embellishments to that. The specific writing is:

V-on: indicates the attribute name. The modifier =Copy the code

.stop prevents bubbling

An example of a click event is written as follows:

V-on :click.stop = 'function name'Copy the code

So what does that mean? What is bubbling?

Let’s go down.

Suppose we had a way of writing it:

That is, the outside divs and the inside divs each have their own bound events. The one on the outside pops a, the one on the inside pops B.

So if we click on the outside string Say A, the browser will pop up an A, and that’s fine.

Then we click on the string Say B, and the browser pops up a B, and then an A!

This is obviously problematic because we don’t want function A to follow function B. However, it is not uncommon to have nested elements with bound events on both sides.

The result is to click on the inside, and it will start from the inside, and then go through the outer element tags one by one!

It’s like a bubble, and it starts at the bottom of the ocean and bubbles all the way to the surface.

To prevent this from happening, we are going to use the modifier.stop().

.stop() is used to prevent bubbling, so that it does not cause the above problems. It does not execute the events of the surrounding elements.

Specific usage:

Is this modifier useful? And there are plenty of them.

.stop – Stops bubbling

.prevent – Prevents default events

.capture – Prevents capture

.self – Only listens for events that trigger the element

.once – Triggers only once

.left – Left button event

.right – right-click event

.middle – Middle wheel event

We will talk about it one by one when we have time in the future. If you are interested, you can also learn by yourself on Baidu.

Ok, that’s it for this lesson, how about that, doesn’t it feel easy?? Feel simple, immediately pay attention to this public number ~ into the group learning please add V: Qingwanjianhua

This article uses the article synchronization assistant to synchronize