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

news/2024/9/29 21:14:21/
views" class="markdown_views prism-atom-one-light">
  • 推荐学习文档
    • 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;}}}};

这些方法可以根据你的具体需求进行选择和调整,以实现在 UniApp 中为view设置当前视图之外的点击事件。

希望本文对你有所帮助!如果你有任何问题或建议,欢迎在评论区留言。

关注我看更多有意思的文章哦!👉👉


http://www.ppmy.cn/news/1532088.html

相关文章

怎么用gitee做一个图片仓库,在md文档中用这个图片网络地址,然后显示图片

痛因&#xff1a;我为什么要这样做&#xff0c;呃&#xff0c;我一开始图片都是存本地地址的&#xff0c;放在和这个md文档同级的assets文件夹下面&#xff0c;这样子确实当时很方便&#xff0c;复制粘贴什么也不用管&#xff0c;但是想把这个文档分享给别的人的时候&#xff0…

9月27日,每日信息差

第一、中国科学家团队在干细胞治疗领域取得重要突破&#xff0c;通过化学重编程技术成功制备出胰岛细胞&#xff0c;并用于移植治疗一名 1 型糖尿病患者&#xff0c;实现了临床功能性治愈。相关研究成果已发表在国际权威期刊《细胞》上。 第二、交通运输部公路局局长周荣峰在国…

路由器的天线有什么用?数量多≠信号强?

你是否也曾凝视着路由器上那几根或长或短的天线&#xff0c;心中暗自嘀咕&#xff1a;“这些天线到底有啥用&#xff1f;是不是天线越多&#xff0c;信号就越强呢&#xff1f;”今天&#xff0c;让我们一同揭开这一谜团&#xff01; 一、路由器天线的核心作用 1. 信号发射与接…

今天推荐一个文档管理系统 Dorisoy.Pan

Dorisoy.Pan 是一个基于 .NET 8 和 WebAPI 构建的文档管理系统&#xff0c;它集成了 Autofac、MediatR、JWT、EF Core、MySQL 8.0 和 SQL Server 等技术&#xff0c;以实现一个简单、高性能、稳定且安全的解决方案。 这个系统支持多种客户端&#xff0c;包括网站、Android、iO…

redis mysql nginx的docker-compose

redis mysql nginx的docker-compose version: 3services:nginx:image: docker.m.daocloud.io/nginx:latestcontainer_name: nginxrestart: unless-stoppedenvironment:TZ: Asia/ShanghaiLANG: en_US.UTF-8volumes: # 目录映射(宿主机:容器内)- "./nginx/conf/nginx.conf:…

【计算机网络最全知识点问答】第二章 物理层

重点和难点 重点&#xff1a; 数据通信的基本概念&#xff0c;包括数据通信系统的组成、模拟信号与数字信号、调制解调等。 数据通信中的几个指标&#xff0c;如信号传输速率、数据传输速率、信道容量、带宽、时延、误码率等。 多路复用技术&#xff0c;包括频分多路复用、时…

【JavaEE初阶】深入解析单例模式中的饿汉模式,懒汉模式的实现以及线程安全问题

前言&#xff1a; &#x1f308;上期博客&#xff1a;【JavaEE初阶】深入理解wait和notify以及线程饿死的解决-CSDN博客 &#x1f525;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 ⭐️小编会在后端开发的学习中不断更新~~~ &#x1f973;非常感谢你的…

企业级移动门户的多样化选择:为数字化转型赋能

在当今数字化转型的浪潮中&#xff0c;企业级移动门户&#xff08;Enterprise Mobile Portal&#xff09;被广泛应用于企业的日常运营中。它们为企业提供了一个集中、统一的移动应用与数据访问平台&#xff0c;帮助提升工作效率、增强实时沟通并改善员工体验。随着企业对灵活性…