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

  • 推荐学习文档
    • 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.mzph.cn/web/53679.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024.9.25 数据分析学习

资料&#xff1a; 【开课吧哩堂】数据挖掘项目之用户流失预警系统_哔哩哔哩_bilibili 五万字 | Spark吐血整理&#xff0c;学习与面试收藏这篇就够了&#xff01;-腾讯云开发者社区-腾讯云 (tencent.com) 黑马程序员Spark全套视频教程&#xff0c;4天spark3.2快速入门到精通…

SQL进阶技巧:如何利用if语句简化where或join中的条件 | if条件语句的优雅使用方法

目录 0 问题场景 1 数据准备 2 问题分析 2.1 需求一 2.2需求二 3 小结 0 问题场景 有两张表,一张用户下单表user_purchase(用户ID粒度)包含用户ID、订单ID和下单消耗金额和一张用户维表user_info包含用户ID、用户年龄和用户是否实名认证。 user_purchase user_info 需…

网络编程,端口号,网络字节序,udp

前面一篇我们讲了网络的基础&#xff0c;网络协议栈是什么样的&#xff0c;数据如何流动传输的&#xff1b;接下来这篇&#xff0c;我们将进行实践操作&#xff0c;真正的让数据跨网络进行传输&#xff1b; 1.网络编程储备知识 1.1 初步认识网络编程 首先我们需要知道我们的…

用户态缓存:环形缓冲区(Ring Buffer)

目录 环形缓冲区&#xff08;Ring Buffer&#xff09;简介 为什么选择环形缓冲区&#xff1f; 代码解析 1. 头文件与类型定义 1.1 头文件保护符 1.2 包含必要的标准库 1.3 类型定义 2. 环形缓冲区结构体 2.1 结构体成员解释 3. 辅助宏与内联函数 3.1 min 宏 3.2 is…

Ubuntu24.04中安装Electron

1. 安装Nodejs 使用代理服务从github下载并执行Nodejs安装脚本(假设代理服务器为192.168.2.150:10792) curl -x 192.168.2.150:10792 -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash #注意&#xff0c;Nodejs官网的安装命令少了下面这一行: …

OpenHarmony(鸿蒙南向)——平台驱动指南【MIPI CSI】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 概述 功能简介 CSI&#xff08;Camera Serial Interface&#xf…

深度学习基础及技巧

机器学习中的监督学习 监督学习是通过对数据进行分析&#xff0c;找到数据的表达模型&#xff0c;对新输入的数据套用该模型做决策 主要分为训练和预测两个阶段 训练阶段&#xff1a;根据原始数据进行特征提取&#xff0c;然后使用决策树、随机森林等模型算法分析数据之间的特…

AuthorizationPolicy 是一个重要的配置对象,用于定义服务间的访问控制和权限管理。

在 Istio 服务网格中&#xff0c;AuthorizationPolicy 是一个重要的配置对象&#xff0c;用于定义服务间的访问控制和权限管理。它允许管理员根据一系列规则来决定服务间的访问权限&#xff0c;从而增强系统的安全性。 AuthorizationPolicy 的作用 AuthorizationPolicy 主要用…

vue项目npm run serve 报错,Error: read ECONNRESET at TCP.onStreamRead

背景&#xff1a;vue2的项目&#xff0c;之前npm run serve一直可以正常使用&#xff0c;突然每次启动都会报错了&#xff0c;报错信息如下&#xff1a; node:events:492 throw er; // Unhandled error event ^ Error: read ECONNRESET at TCP.onStreamRead (n…

使用python搭建Web项目

使用python搭建Web项目 服务器基本配置安装python配置仓库镜像源安装conda管理python环境&#xff08;可选&#xff09; 使用django 框架搭建web项目迁移数据库到mysql项目依赖 服务器基本配置 安装python // 检测python版本 python --version python3 --version // 安装pyth…

【动态规划-多重背包】【hard】力扣2585. 获得分数的方法数

考试中有 n 种类型的题目。给你一个整数 target 和一个下标从 0 开始的二维整数数组 types &#xff0c;其中 types[i] [counti, marksi] 表示第 i 种类型的题目有 counti 道&#xff0c;每道题目对应 marksi 分。 返回你在考试中恰好得到 target 分的方法数。由于答案可能很…

Leetcode 136 只出现一次的数字

题目链接&#xff1a;136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性…

计算机毕业设计Python+Flask微博情感分析 微博舆情预测 微博爬虫 微博大数据 舆情分析系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

首先安装需要的python库&#xff0c; 安装完之后利用navicat导入数据库文件bili100.sql到mysql中&#xff0c; 再在pycharm编译器中连接mysql数据库&#xff0c;并在设置文件中将密码修改成你的数据库密码。最后运行app.py&#xff0c;打开链接&#xff0c;即可运行。 B站爬虫数…

Java语言程序设计基础篇_编程练习题**18.31 (替换单词)

目录 题目&#xff1a;**18.31 (替换单词) 习题思路 代码示例 运行结果 替换前 替换后 题目&#xff1a;**18.31 (替换单词) 编写一个程序&#xff0c;递归地用一个新单词替换某个目录下的所有文件中出现的某个单词。从命令行如下传递参数&#xff1a; java Exercise18…

CSS中的字体样式、文本样式、列表样式以及背景和渐变

一、字体样式和文本样式 1.span标签 span标签的作用&#xff1a;能让某几个文字或者是词语凸显出来 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-…

【ComfyUI】生成图细节更清晰——Consistency_Decoder

原文&#xff1a;https://github.com/openai/consistencydecoder comfyui: https://github.com/gameltb/Comfyui_Consistency_Decoder_VAE 博文资料下载&#xff1a;https://pan.baidu.com/s/1SwfA4T6iMsA8IrRrGXm4sg?pwd0925 安装 【秋葉aaaki】comfyui一键运行包 夸克网盘…

Vue3 + TS 实现同一项目同一链接,pc端打开是web应用,手机打开是H5应用

前言&#xff1a; 我自己搭建的项目基本都是用 postcss-px-to-viewport 插件进行适配的&#xff1b; 最近在做一个项目&#xff0c;需求是同样的功能&#xff0c;用户可以在电脑上打开操作使用&#xff0c;也可以在手机上登录进去操作使用&#xff0c;但是跳转链接是同一个&am…

LVS-DR实战案例,实现四层负载均衡

环境准备&#xff1a;三台虚拟机&#xff08;NET模式或者桥接模式&#xff09; 192.168.88.200 &#xff08;web1&#xff09;(安装nginx服务器作为测试) 192.168.88.201 &#xff08;服务器&#xff09;&#xff08;用于部署lvs-dr&#xff09; 192.168.88.202 (web2)…

猫头虎分享:Python库 Jinja2 的简介、安装、用法详解入门教程

猫头虎分享&#xff1a;Python库 Jinja2 的简介、安装、用法详解入门教程 &#x1f42f; 摘要 今天有粉丝问猫哥&#xff1a;“如何使用Jinja2进行Python模板渲染&#xff1f;”这是一个非常常见的问题&#xff0c;特别是在开发Web应用时。Jinja2是一个强大的模板引擎&#x…

一篇带你搞定数据结构散列表

数据结构入门学习&#xff08;全是干货&#xff09;——散列表 1 散列表 1.1 引子&#xff1a;散列的基本思路 C语言变量名的管理&#xff1a; 定义/声明&#xff1a;先定义后使用。插入与查找&#xff1a; 插入&#xff1a;新变量定义。查找&#xff1a;检查变量是否已定义。…