Be careful:
1. The self event will prevent its own bubbling event or listening event, and will not affect other elements. stop will affect the whole.
2. Pay attention to the use position of the event modifier. stop prevents the event from bubbling from the bottom up. capture executes from the top down. So one is in the child element, one is in the parent element
3. Event modifiers can be used jointly, and the order has no effect on the result
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<style>
.wrapper{
height: 150px;
background-color:darkorange;
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper" v-on:click="divClick">
<input type="button" value="Point me" v-on:click="inputClick">
</div>
<!--No event modifiers are added-->
<div class="wrapper" v-on:click="divClick">
<input type="button" value="Point me" v-on:click.stop="inputClick">
</div>
<!--.stop Prevent event bubbling, bottom-up execution-->
<div class="wrapper" v-on:click.capture="divClick">
<input type="button" value="Point me" v-on:click="inputClick">
</div>
<!--.capture Implement a mechanism to capture events, used on the parent element, top-down-->
<div class="wrapper" v-on:click.self="divClick">
<input type="button" value="Point me" v-on:click="inputClick">
</div>
<a href="http://Www.bilibilibili. Com "v-on: click. Prevent =" LinkClick "> it's worth it</a>
<!--.prevent The default event is blocked. When used here, it will not jump, only the output result will be executed-->
<a href="http://Www.bilibilibili. Com "v-on: click. Prevent. Once =" LinkClick "> it's worth it</a>
<!--.once Event handlers are triggered only once, and event modifiers can be used together, with no effect on the order-->
</div>
<script>
//Create Vue instance
var vm = new Vue({
el:'#app',
data:{},
methods:{
divClick(){
console.log('div Event')
},
inputClick(){
console.log('input Event')
},
linkClick(){
console.log('link Event')
}
}
});
</script>
</body>
</html>Execution effect:
