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

文章目录

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

  • 在父view的点击事件处理函数中,可以通过事件对象的target属性来判断点击的实际元素是不是子view,如果不是,再执行相应的逻辑。
  • 示例代码如下:
html 复制代码
   <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的其他交互功能,需要谨慎使用)。
  • 示例:
html 复制代码
   <template>
     <view @click="parentClick">
       <view class="child-view" style="pointer-events:none;"></view>
     </view>
   </template>

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

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

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

相关推荐
Mintopia37 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia40 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn1 小时前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero1 小时前
基于vue3完成领域模型架构建设
前端
PanZonghui1 小时前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴1 小时前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常1 小时前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常1 小时前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾1 小时前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法