一: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>