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

目录

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

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

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

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

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

如下代码：

 
 

      @click="handleCurrentItem(image,index)">
                

                     
	                  

	                    
	                  
                
                
                

                  	
                
 
  
  	  handleCurrentItem(image, index) {
       		console.log("父元素")
      },
      removePic(index){
        	console.log("子元素")
      },

事件修饰符

...



...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。（官网有介绍此段）

vue点击事件（父子层级元素点击时踩坑记录）

var vm_target = new Vue({
                el: '#vm_target',
                data: {
 
                },
                methods:{
                    /**父元素点击事件**/
                    fatherClick:function(event){
                        var el1 = event.currentTarget;
                                var el2 = event.target;
                    },
　　　　　　　　　　　　　　childClick:function(event){ 
　　　　　　　　　　　　　　　　　　 
　　　　　　　　　　　　　　}
                     
                },
                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

总结

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