一:stop prevent once事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click="spread" >
<input type="button" value="按鈕" @click.stop="show">
<a href="https://blog.csdn.net/x1037490413" @click.prevent.once="linkClick">點擊這裏進入鏈接</a>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{},
methods:{
show(){
console.log('這裏是點擊事件');
},
spread(){
console.log('這裏是inner點擊事件');
},
linkClick(){
console.log('觸發了鏈接的點擊')
}
}
})
</script>
</body>
</html>
二：capture事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click.capture="spread" >
<input type="button" value="按鈕" @click="show">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{},
methods:{
show(){
console.log('這裏是點擊事件');
},
spread(){
console.log('這裏是inner點擊事件');
},
linkClick(){
console.log('觸發了鏈接的點擊')
}
}
})
</script>
</body>
</html>
三：self事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click.self="spread" >
<input type="button" value="按鈕" @click.self="show">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{},
methods:{
show(){
console.log('這裏是點擊事件');
},
spread(){
console.log('這裏是inner點擊事件');
},
linkClick(){
console.log('觸發了鏈接的點擊')
}
}
})
</script>
</body>
</html>
四：self和capture的區別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div calss="outer" @click="outer">
<div class="inner" @click.self="spread">
<input type="button" value="按鈕" @click="show">
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
show() {
console.log('這裏是點擊事件');
},
spread() {
console.log('這裏是inner點擊事件');
},
outer(){
console.log('這裏是outer點擊事件');
}
}
})
</script>
</body>
</html>
