- 代码展示
<view style="height: 600rpx;background-color: red;" @click="click1">
点击事件1
<view style="height: 400rpx;background-color:skyblue;" @click.stop="click2">
点击事件2
<view style="height: 200rpx;background-color: gray;" @click="click3">
点击事件3
</view>
</view>
</view>methods:{
click1(){
console.log("click1")
},
click2(){
console.log("click2")
},
click3(){
console.log("click3")
},
},- 效果图
- 点击事件1，输出内容：（使用的点击事件：@click.
- 点击事件2，输出内容：（使用的点击事件：@click.stop）
- 点击事件3，输出内容：（使用的点击事件：@click）
备注：事件的@click.stop防止了事件冒泡，所以不会答应click1文章来源：https://www.toymoban.com/news/detail-610181.html
- 应用场景
当同一个页面出现多个点击事件的时候，点击子元素时不会触发父元素的点击事件文章来源地址https://www.toymoban.com/news/detail-610181.html
- @click.stop的作用：阻止事件冒泡
到了这里，关于uniapp点击事件阻止冒泡(实用)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
