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

目录

• 父元素点击事件与子元素点击事件冲突
• vue点击事件（父子层级元素点击时踩坑记录）
• 总结

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

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

这就用到vue事件中的事件修饰符，官网地址

Vue.js 为 v-on 提供了事件修饰符 .stop、.prevent、.capture、.self、.once、.passive，我们要处理子元素与父元素的事件冲突就要阻止事件传递的产生，而事件修饰符 .stop 的作用是阻止事件继续传播，那么我们需要在子元素的事件上@R_406_2049@修实符 .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="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点击事件（父子层级元素点击时踩坑记录）

ul>
        li @click="fatherClick">
            div @click.stop="childClick">
            /div>
        /li>
    /ul>
    

VAR vm_target = new Vue({
                el: '#vm_target',                data: {
                 }
,                methods:{
                    /**父元素点击事件**/                    fatherClick:function(event){
                            var el1 = event.currentTarget;
                                    var el2 = event.target;
                    }
    ,br>
　　　　　　　　　　　　　　childClick:function(event){
     br>
    　　　　　　　　　　　　　　　　　　 br>
　　　　　　　　　　　　　　}
                                     }
,                created:function(){
                                     }
                             }
    );
       

在JS中，event.currentTarget获取到的是click事件绑定的DOM对象，event.target获取到的为当前所点击的DOM对象。

若绑定了一个父级元素后，点击子元素时，会触发父元素的点击事件，若需要点击子元素时不触发父元素事件

有两种方法：

1、在父元素中判断event.currentTarget == event.target是否为true

editTarget:function(event){
           var el1 = event.currentTarget;
           var el2 = event.target;
       if(el1 == el2){
          //do something       }
  }
    

2、在子元素中，绑定一个阻止冒泡的点击事件 @click.stop

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue父组件点击触发子组件事件的实例讲解
• 解决vue的touchStart事件及click事件冲突问题
• VUE中如何实现阻止事件冒泡

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！