@click
@click直接点击,会触发父元素事件
例如:
<template> <div @click="parentClick"> <div @click="childClick" > 子界面 </div> </div> </template>
<script>
export default {
data() {
return {}
},
methods: {
parentClick(){
console.log('点击了父界面')
},
childClick(){
console.log('点击了子界面')
}
}
</script>
当单击子界面时,打印结果为:
点击了子界面
点击了父界面
@click.stop
@click.stop阻止冒泡事件,相当于event.stopPropagation()
例如:
<template> <div @click="parentClick"> <div @click.stop="childClick" > 子界面 </div> </div> </template> <script> export default { data() { return {} }, methods: { parentClick(){ console.log('点击了父界面') }, childClick(){ console.log('点击了子界面') } } </script>
当单击子界面时,打印结果为:
点击了子界面
@click.prevent
@click.prevent阻止默认事件,相当于event.preventDefault()
例如:
<template> <div @click="parentClick"> <div @click.stop="childClick" > 子界面 </div> <a href="www.baidu.com" @click.prevent="urlClick"> 跳转链接 </a> </div> </template> <script> export default { data() { return {} }, methods: { parentClick(){ console.log('点击了父界面') }, childClick(){ console.log('点击了子界面') }, urlClick(){ console.log('点击了跳转链接') } } </script>
当点击a标签时,界面不会跳转到设置的跳转链接www.baidu.com,而是执行绑定的事件函数urlClick()
运行结果为:
点击了跳转链接 点击了父界面
@click.prevent可以搭配stop事件使用
例如:若事件为 @click.prevent.stop="urlClick"
则运行结果为:
点击了跳转链接
@click.self
@click.self 事件,只有点击绑定了self修饰符的元素本身才会触发事件
例如:
<template> <div @click.self="parentClick"> <div @click="childClick" > 子界面 </div> </div> </template> <script> export default { data() { return {} }, methods: { parentClick(){ console.log('点击了父界面') }, childClick(){ console.log('点击了子界面') } } </script>
当点击子界面时,由于父元素添加了self修饰,所以不会触发
运行结果为
点击了子界面
@click.capture
@click.capture为绑定事件添加捕获事件,点击子元素时才会触发,添加了capture修饰符的事件会先执行
例如:
<template> <div @click.capture="parentClick"> <div @click="childClick" > 子界面 </div> </div> </template> <script> export default { data() { return {} }, methods: { parentClick(){ console.log('点击了父界面') }, childClick(){ console.log('点击了子界面') } } </script>
运行结果为:
点击了父界面 点击了子界面
@click.once
@click.once只执行一次事件,之后再触发事件没有效果
@click.passive
@click.passive不拦截默认事件
标签:vue,界面,log,修饰符,点击,事件,console,click From: https://www.cnblogs.com/fruitesBlogs/p/17443163.html