【Uniapp，Vue】阻止父元素事件覆盖子元素事件

最新推荐文章于 2024-08-16 21:25:36 发布

Cutecumber

最新推荐文章于 2024-08-16 21:25:36 发布

阅读量2.6k

点赞数 3

分类专栏： web开发文章标签： uni-app 前端 html

本文链接：https://blog.csdn.net/singdancerapball/article/details/131867926

版权

web开发专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章描述了一个在Vue应用中常见的交互需求：点击元素显示弹出框，而点击弹出框外的区域则关闭它。然而，原代码实现会导致点击弹出框时关闭事件被触发。解决方案是在子组件的点击事件上添加.stop修饰符，防止事件冒泡到父元素，有效隔离了父子事件的交互影响。

摘要由CSDN通过智能技术生成

有个需求，点击一个元素，让弹出框显示，点击弹出框以外的区域，就关闭弹出框，如下代码所示。
但是这样有个问题，就是当弹出框显示以后，点击弹出框的区域也会触发父元素的点击事件，使得ifshow=false

<view @click="ifshow=false">
	<view @click="ifshow=true">
		点击显示弹出框
	</view>
	<view v-if="ifshow">
		弹出框
	</view>
</view>

在这里插入图片描述

解决方法：在子组件事件加个修饰stop，就会相互隔绝父子事件

<view @click="ifshow=false">
	<view @click.stop="ifshow=true">
		点击显示弹出框
	</view>
	<view v-if="ifshow">
		弹出框
	</view>
</view>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cutecumber

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - 组件通信（子传父）

王佳斌

11-18

4718

vue3.js 官方文档，vue3子组件给父组件传递数据，vue3组件通信子传父，vue3组件通信官方文档教程，vue3的组件传递之子传父(项目实操)，vue3组件之间通信(二)——子传父属性和方法，Vue3父子组件间传参通信，二、vue3.0之组件通信之父子通信，vue实现组件间通信的几种方式(父传子,子传父)，组件通信3:子传父($emit)，Vue3中的父传子和子传父如何实现，vue3.x组件间通信，vue3 父子组件通信，VUE3 子传父，vue3 父子组件传值通信，Vue3 - 组件通信（子传父

uniapp中子组件向父组件传值

weixin_45648000的博客

01-05

2041

整体流程子组件事件去触发全局自定义事件，父组件在全局自定义事件中去获取到值，并将值保存下来进行使用；子组件绑定事件 1）各子组件绑定一个事件sendnum，让这个事件去触发一个全局自定义事件lxEven son.vue <template> <button @onclick = "sendnum"></button> </template> <script> export default { data(){ return:{

参与评论您还未登录，请先登录后发表或查看评论

[uniapp]怎么阻止事件冒泡

weixin_48047636的博客

07-13

674

uniapp

vue、uniapp父子盒子的点击事件不互相影响

m0_62063072的博客

01-24

1610

2、在子盒子身上添加 @click.stop="()=>deleteStoreResume(item.sri_id)"1、在子盒子上添加 @tap.stop="deleteStoreResume(item.sri_id)"父盒子身上已经有点击事件了，子盒子添加的点击事件，如何不触发父盒子的点击事件。

解决父子组件样式互相影响

热门推荐

起个类名好难的博客

12-07

1万+

vue中父元素点击事件与子元素点击事件冲突在做vue项目的时候，遇到子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？这就用到vue事件中的事件修饰符，官网地址https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6...

vue子组件中处理从父组件获取到的数据（uniapp商品列表组件）

weixin_46325225的博客

03-18

847

使用监听函数监听子组件props中变量的变化，当变量值发生变化时，修改获取到的变量值，然后赋值给data中的变量，最后将data中的变量值渲染到页面上完成组件页面渲染效果！ <template> <view class="product-list"> <view class="item" v-for="(item,index) in productData" :key="index"> <image :src="item.ThumbnailUrl160

>Vue组件化，封装SVG图标支持uniapp等vue版本 # 前言 # 设计思路 **创建SVG组件：** 首先创建一

07-18

### Vue组件化，封装SVG图标支持uniapp等vue版本 #### 前言与设计思路在现代Web开发中，图标是非常重要的视觉元素之一。传统的图标使用方法包括使用图像文件（如PNG或JPEG）或者字体图标。然而，这些方法都有...

浅谈Vue.js 关于页面加载完成后执行一个方法的问题

10-17

在子组件`mounted`时，它检查`list`的长度，然后通过`$emit`向父组件发送`whiteShow`事件，改变父组件中相应元素的显示状态。这确保了只有在子组件渲染完成并且有数据时，父组件的元素才会显示。 ```javascript // ...

uniapp 适配小程序，app通用阻止事件向父级冒泡

gao6402246的博客

07-07

1553

1.父级点击事件用 @click="方法名" (用@click.stopAPP点击父级没反映,并报错，小程序有效果) 2.子级点击事件用@click.stop="方法名"(用@click @click.native.stop禁止父级方法 app能阻止事件向父级冒泡，小程序没效果) 3.示例 <uni-list-item class="list-item" clickable @click="itemClick(item,2)"> <!...

uni-app子级事件不影响父级事件

weixin_43926335的博客

09-18

4198

子级绑定事件用：@click.native.stop就可以啦

vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发

weixin_44509776的博客

04-11

6031

在vue项目中，子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？

微信小程序开发---点击子元素不触发父元素的点击事件--catchtap

2301_78409414的博客

05-26

550

微信小程序开发---点击子元素不触发父元素的点击事件

vue阻止子元素触发父元素的事件，事件冒泡处理

weixin_42757570的博客

12-24

4686

<div @click="click1"> <div @click="click2"></div> </div> 如果绑定了一个父级元素后，点击子元素时，会触发父元素的点击事件，如果需要点击子元素时不触发父元素事件，有下面的方法： 1. 在父元素中判断event.currentTarget == event.target是否为true 原理: 在JS中，event.currentTarget获取到的是click事件绑定的DOM对象，event.target

uni-app——如何阻止事件冒泡

TianXuab的博客

10-27

8629

在开始讨论如何阻止事件冒泡之前，让我们先了解一下什么是事件冒泡。事件冒泡是指当一个元素上的事件被触发时，它会向上级元素传播，直到到达文档根节点。这意味着如果我们不采取任何措施，事件将会被多个元素捕获和处理。

uniapp小程序开发u-action-sheet组件上拉样式问题

m0_62526603的博客

08-25

712

uniapp小程序开发u-action-sheet组件上拉样式问题

vue3 uniapp ref获取元素失败

08-09

### 回答1：如果您正在使用 Vue 3 和 uni-app，那么可以使用 `ref` 来获取元素。以下是一个示例： ```vue <template> <div ref="myElement"></div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myElement = ref(null); onMounted(() => { console.log(myElement.value); // 输出获取到的元素 }); return { myElement, }; }, }; </script> ``` 在这个示例中，我们使用 `ref` 创建了一个名为 `myElement` 的引用，并在 `onMounted` 钩子函数中打印了该引用的值，以确保成功获取到元素。请注意，我们在模板中使用 `ref` 来指定要获取的元素，并且必须使用 `.value` 来访问该引用的实际值。如果您仍然无法获取到元素，请确保元素已经正确渲染，并且您的代码没有任何语法错误。 ### 回答2：在Vue3和uniapp中，我们可以使用ref来获取元素的引用。但是如果在使用ref获取元素时出现失败的情况，可能有以下几种原因： 1. 元素未正确引用：确保在template中正确声明了元素，并使用ref属性指定引用名称。例如：`<div ref="myDiv"></div>`。 2. 元素未在mounted生命周期中获取：在Vue3中，mounted生命周期是最佳时机来获取元素的引用。确保在mounted生命周期中正确使用ref获取元素，例如： ```javascript mounted() { this.$nextTick(() => { const myElement = this.$refs.myDiv; console.log(myElement); }); } ``` 3. 元素可能被v-if或v-show条件控制隐藏：如果元素的显示状态受到条件指令（v-if或v-show）的控制，当条件为false时，元素实际上是不存在的，无法通过ref获取。确保条件正确设置以显示该元素。 4. 元素可能存在在子组件中：如果需要获取的元素位于子组件中，需要确保通过ref正确引用子组件，并在父组件中使用`$refs`访问子组件中的元素。例如： ```html <template> <child-component ref="child"></child-component> </template> <script> import ChildComponent from "./ChildComponent"; export default { components: { ChildComponent }, mounted() { this.$nextTick(() => { const myElement = this.$refs.child.$refs.myDiv; console.log(myElement); }); } }; </script> ``` 5. uniapp版本兼容问题：如果使用的是旧版本的uniapp，可能会存在与Vue3的ref语法不兼容的问题。请确保使用的uniapp版本与Vue3兼容。总结：在使用Vue3和uniapp时，通过ref获取元素可能会遇到一些问题，但请确保元素正确引用、在合适的生命周期中获取、条件正确设置以及处理子组件中的元素引用。 ### 回答3：在Vue 3和Uniapp中使用ref获取元素时，有时可能会失败。原因可能是以下几点： 1. 元素被动态生成：如果要获取的元素是在Vue的生命周期钩子函数之外动态生成的，那么在ref绑定时可能无法找到该元素。这种情况下，可以尝试在mounted生命周期钩子函数中获取元素，这样可以确保元素已经被完全渲染到DOM中。 2. 元素不存在：如果要获取的元素在渲染期间条件不满足而未被渲染到DOM中，那么ref获取将会失败。在这种情况下，可以在模板中添加v-if指令或者使用v-show指令来保证元素存在。 3. 元素在组件内部：如果要获取的元素是在组件内部而不是全局范围内，那么在使用ref绑定时需要确保ref在同一组件内部。在Vue 3中，可以使用setup函数中的ref来获取组件内部的元素。 4. 组件嵌套问题：如果要获取的元素位于子组件中，那么在父组件中使用ref获取将无法找到该元素。这时，可以尝试使用$refs来访问子组件的ref。 5. 错误的ref绑定方式：在Vue 3中，ref获取元素的方式与Vue 2稍有不同。在Vue 3中，可以使用`ref`函数来获取元素，而不是直接使用`this.$refs`。例如，`const myElement = ref(null);`来创建一个ref，然后在元素上使用`ref="myElement"`来绑定。总结起来，如果在Vue 3和Uniapp中使用ref无法成功获取元素，请检查元素是否被动态生成、元素是否存在、是否位于同一组件内部、是否存在组件嵌套问题，以及是否使用了正确的ref绑定方式。如果仍然无法解决问题，请提供更多的代码和错误信息，以便更好地帮助你解决问题。