.capture event modifier function uses event capture mode when adding event listeners
That is, add a listener to the element. When the element bubbles, the element with the modifier will be triggered first. If there are multiple modifiers, they will be triggered from the outside to the inside.
It means whoever has the event modifier will trigger it first.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>.captureEvent modifier</title>
<style type="text/css">
* {
margin: 0 auto;
text-align: center;
line-height: 40px;
}
div {
width: 100px;
}
#obj1 {
background: deeppink;
}
#obj2 {
background: pink;
}
#obj3 {
background: hotpink;
}
#obj4 {
background: #ff4225;
}
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<div v-on:="doc">
obj1
<div v-on:="doc">
obj2
<div v-on:click="doc">
obj3
<div v-on:click="doc">
obj4
<!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。Clickobj4When，The order of popup is：obj1、obj2、obj4、obj3；
because1，2Have modifiers，Therefore, the event is triggered first，Then it's4Trigger itself，The last bubbling event。
-->
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
= ;
alert()
}
}
})
</script>
</body>
</html>
Summarize
The above is the use of the Vue event modifier capture introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!