使用@tap.stop阻止事件继续传播
更新时间：2022年03月26日 16:15:18 作者：%程序羊%
这篇文章主要介绍了使用@tap.stop阻止事件继续传播，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
@tap.stop阻止事件继续传播
在uni-app开发当中，难免会遇到外层view嵌套内层view，又同时都含有点击事件，这样就会起冲突。
为了防止事件的继续传播我们就会用到事件修饰符.stop
先看代码：
<template> <view class="wai" @tap="waiTab"> <h5>外面</h5> <view class="nei" @tap="neiTab"> <h5>内部</h5> </view> </view> </template>
<script>
export default {
data() {
return {
}
},
methods: {
waiTab(){
console.log("点击了外边")
},
neiTab(){
console.log("点击了内部")
}
}
}
</script><style>
.wai{
width: 100%;
height: 100px;
display: flex;
justify-content: center;
background-color: #0000FF;
}
.nei{
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #00CE47;
}
</style>效果是这样的：
当我们点击外部时：
当我们点击内部时：
解决方法：只需在@tap后面加.stop就可以阻止事件继续传播
<view class="wai" @tap.stop="waiTab"> <h5>外面</h5> <view class="nei" @tap.stop="neiTab"> <h5>内部</h5> </view> </view>
uniapp+uview @tap.stop="stop"组织冒泡失效bug
阻止事件冒泡时，直接在需要使用的方法上加.stop无效
需要在外层加一层标签 <view @tap.stop=“stop”>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在前后端的开发中总是难免会遇到前后端的跨域问题,下面这篇文章主要给大家介绍了关于vue2中vue.config.js简单配置代理跨域的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
这篇文章主要为大家详细介绍了Vue.js基础指令实例，各种数据绑定、表单渲染大总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了Vue slot用法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了vue+elementUI实现点击左右箭头切换按钮功能,样式可以根据自己需求改动,感兴趣的朋友可以参考下实现代码2024-05-05
今天遇到一个bug,有一个Element的message组件,用它做的一个进度条,它是写在一个页面上,并且是用js控制dom元素的,web端一切正常,但是,H5页面刷新的时候它样式加载不出来了,所以本文主要介绍了Vue项目刷新后h5样式失效的原因及解决方案,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了使用vue自定义如何实现Tree组件和拖拽功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最近正在使用Pinia进行状态管理,我希望在重新刷新页面时保持状态,下面这篇文章主要给大家介绍了关于Pinia简单使用以及数据持久化的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了解决.vue文件url引用文件的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
vue对插件(iview,elementui,treeselect)样式的局部修改方式
这篇文章主要介绍了vue对插件(iview,elementui,treeselect)样式的局部修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论