当前位置: 首页 > news >正文

uniapp控制点击view事件,不包含子view区域

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

文章目录

    • 通过事件对象判断目标元素
    • 使用 CSS 属性阻止事件穿透(如果是覆盖场景)

通过事件对象判断目标元素

  • 在父view的点击事件处理函数中,可以通过事件对象的target属性来判断点击的实际元素是不是子view,如果不是,再执行相应的逻辑。
  • 示例代码如下:
   <template><view @click="parentClick"><view class="child-view"></view></view></template><script>export default {methods: {parentClick(e) {if (e.target.tagName === 'VIEW' &&!e.target.classList.contains('child-view')) {// 这里执行父view被点击且不是子view区域被点击时的逻辑console.log('父view被点击,且不是子view区域');}}}};</script>

使用 CSS 属性阻止事件穿透(如果是覆盖场景)

  • 如果子view在父view之上并且有覆盖关系,可以使用pointer - events:none来阻止子view区域的点击事件穿透到父view(注意这种方法可能会影响子view的其他交互功能,需要谨慎使用)。
  • 示例:
   <template><view @click="parentClick"><view class="child-view" style="pointer-events:none;"></view></view></template>

在这个例子中,子view区域不会响应点击事件,父view的点击事件可以正常触发,并且不会受到子view的干扰(但子view本身不能再通过点击交互了,如需恢复子view的交互功能,可能需要结合 JavaScript 动态修改pointer - events属性)。

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

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


http://www.mrgr.cn/news/45953.html

相关文章:

  • MATLAB中linsolve函数用法
  • 使用 YOLOv 11 模型实现实时手语检测 可同时识别多个手语手势
  • 如何开发APP?
  • 尚硅谷rabbitmq 2024 集群ui 第49节 答疑二
  • Word 中脚注和尾注的区别有哪些?如何正确使用它们?
  • 2024三掌柜赠书活动第三十二期:渗透测试理论与实践
  • 尚硅谷rabbitmq 2024 集群ui 第49节 答疑一
  • 【Linux 从基础到进阶】大数据集群的监控与管理
  • C语言贪吃蛇
  • HDLBits中文版,标准参考答案 | 3.2.5 Finite State Machines | 有限状态机(1)
  • 【Python】Twisted:让自定义网络应用开发变得简单
  • LeetCode题练习与总结:生命游戏--289
  • Authentication Lab | Client Side Auth
  • 低空经济第一步,无人机培训机构如何做大做强?
  • Vue vben admin开源库中table组件tips
  • CMake 属性之全局属性
  • 升级到Ubuntu 24.04遇到的问题
  • LabVIEW提高开发效率技巧----队列使用
  • 系统架构设计师教程 第12章 12.2 信息系统架构 笔记
  • 什么是维度建模