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.js 为 v-on 提供了事件修饰符 .stop、.prevent、.capture、.self、.once、.passive，我们要处理子元素与父元素的事件冲突就要阻止事件传递的产生，而事件修饰符 .stop 的作用是阻止事件继续传播，那么我们需要在子元素的事件上添加事件修实符 .stop 来阻止事件传播。如下代码：

 <!-- html --><li class="settingImgLi" :class="{active:index==isActive}" v-for="(image,index) in data.consultList" :key="index"<!--父元素事件-->@click="handleCurrentItem(image,index)"><div style="width:100%;height:100%;position: relative;overflow: hidden;"><img width="100%" height="100%" :src="data:image.image" alt=""><div class="img-item-selected"><Icon type="md-checkmark" /></div></div><!-- 子元素事件--><div class="img-item-close" @click.stop="removePic(index)"><i class="el-icon-circle-close"></i></div></li><!-- js -->handleCurrentItem(image, index) {console.log("父元素")},removePic(index){console.log("子元素")},

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。（官网有介绍此段）

vue中父元素点击事件与子元素点击事件冲突相关推荐

vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
vue中父传子，父传孙说明
先来说一下,vue中父传往子组件用v-bind绑定属性,在子页面用props接收,子传往父的用$emit this.$emit('change',data),data就是你要传的数据,change为父 ...
总结vue中父向子，子向父以及兄弟之间通信的几种方式
子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template><div id="app"> ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
Vue中使用andt组件a-table列表数据根据点击的表头进行升/降排序-案例
官方示例-API链接数据根据当前点击的内容进行升降排序使用步骤数据量过少,可以使用前端排序方式 //官方案例 <template><a-table :columns=" ...
一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突
在vue中如何处理同一个页面中有多个swiper,首先我们需要分2中情况: 1.如果在vue中采用 Vue-Awesome-Swiper,如果采用这种方式的话,可以给每个swiper组件添加一个cla ...
vue中父传子和子传父，传值方法
1.关于传值的规则 props值是对象的时候,传递的属性以对象的形式保存在props里面,对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则. <div id="app&q ...
Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
vue中父组件怎么调用子组件
前言前段时间,写了个地址的控件,封装成了一个子组件,在其他页面共用. 原文地址:vue利用级联选择器实现全国省市区乡村五级菜单联动然后当时出现了个bug,也没有太注意,后来才发现的.就是重置不了地 ...

vue中父元素点击事件与子元素点击事件冲突

vue中父元素点击事件与子元素点击事件冲突

vue中父元素点击事件与子元素点击事件冲突相关推荐

最新文章

热门文章