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

GoppViper2024-10-12 19:38

推荐学习文档

文章目录

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

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

在父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属性）。

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

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