stop prevents click events from continuing to propagate and prevents bubbling
capture When adding an event listener, use the event capture mode. The child element will trigger the event of the parent element with the capture modifier added and then process the event logic of the child element.
once event is triggered only once
self will only trigger event processing when it is its own element. If its child elements trigger indirectly, it will not trigger.
prevent prevents the default behavior, such as clicking on the a label will jump and adding the prevent modifier will not jump.
Passive does not prevent the default behavior. According to popular understanding: If you tell the browser in advance that this event has a default behavior, I will not block it. You don’t have to worry about the browser and trigger it directly (the code will not be written).
Write code to see the specific results
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.box-outer {
width: 200px;
height: 200px;
border: 1px solid #000fff;
}
.box-inner {
margin: 50px auto;
width: 100px;
height: 100px;
background-color: #c9c0c9;
}
</style>
<body>
<div id="app">
<!-- 外层盒子 -->
<div class="box-outer" @click="clickOuter">
<!-- 内层盒子 -->
<div class="box-inner" @click="clickInner">
<!-- a标签 -->
<a @click="clickA" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js">跳转</a>
</div>
</div>
</div>
<script type="module">
import Vue from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js";
const vm = new Vue({
name: "HelloWorld",
el: "#app",
methods: {
clickOuter() {
console.log('outer');
},
clickInner() {
console.log('inner');
},
clickA() {
console.log('a标签');
},
},
});
</script>
</body>
</html>
1. If you don’t add any modifiers, clicking on the a label will jump, and clicking on the inner box will trigger clickInner first.
Trigger clickOuter again
2. When the prevent modifier is added to the a tag, the click will not jump and the demonstration will not be performed.
3. After adding the once modifier, the event is only triggered once
4. Add .self to the outer box. Clicking on the inner box only triggers the callback of the inner box, but the outer box does not trigger the callback.
<div class="box-outer" @click.self="clickOuter">
5. Add .stop to the internal box to prevent events from bubbling. When the internal box is clicked, only the event callback of the internal box will be triggered, and the event callback of the external box will not be triggered (it will not trigger even after removing self on the external box)
<!-- 外层盒子 -->
<div class="box-outer" @click="clickOuter">
<!-- 内层盒子 -->
<div class="box-inner" @click.stop="clickInner">
<!-- a标签 -->
<a
@click="clickA"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"
>跳转</a
>
</div>
</div>
6. Add the capture modifier to the outer box, modify the code to add an innermost box, and add a click event to print information when clicked.
When you click on the innermost box, you will find that the event callback of the outer box with the capture modifier will be triggered first, followed by itself, and finally the outer box without the capture modifier will bubble up in sequence.
<div class="box-outer" @click.capture="clickOuter">
<!-- 内层盒子 -->
<div class="box-inner" @click="clickInner">
<!-- a标签 -->
<!-- <a
@click="clickA"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"
>跳转</a
> -->
<div class="box-iin" @click="clickIin">最内层盒子</div>
</div>
</div>
Modifiers can be added consecutively such as click.prevent.self. The order is important, so please pay attention when using it.