当前位置：首页 > article >正文

uniapp view设置当前view之外的点击事件

article 2025/1/4 19:13:12

推荐学习文档
- golang应用级os框架，欢迎star
- golang应用级os框架使用案例，欢迎star
- 案例：基于golang开发的一款超有个性的旅游计划app经历
- golang实战大纲
- golang优秀开发常用开源库汇总
- 想学习更多golang知识，这里有免费的golang学习笔记专栏
- 想学习更多前端知识，这里有免费的前端专栏

在 UniApp 中，可以通过以下几种方式为view设置当前视图之外的点击事件：

使用遮罩层和事件监听

在页面中添加一个透明的遮罩层，覆盖整个页面，当点击遮罩层时触发特定的事件。

   <template>
     <view>
       <!-- 你的主要内容 -->
       <view class="content">...</view>
       <!-- 透明遮罩层 -->
       <view class="mask" @tap="onMaskClick"></view>
     </view>
   </template>

   export default {
     methods: {
       onMaskClick() {
         // 处理遮罩层点击事件
         console.log('遮罩层被点击');
       }
     }
   };

利用页面的原生事件监听

可以通过监听页面的click事件，判断点击位置是否在特定的view之外。

   <template>
     <view @click="onPageClick">
       <!-- 你的主要内容 -->
       <view class="content">...</view>
     </view>
   </template>

   export default {
     data() {
       return {
         isContentClicked: false
       };
     },
     methods: {
       onPageClick(event) {
         const target = event.target;
         const content = this.$el.querySelector('.content');
         if (!content.contains(target)) {
           // 点击在特定 view 之外
           console.log('特定 view 之外被点击');
         } else {
           this.isContentClicked = true;
         }
       }
     }
   };