码迷,mamicode.com
首页 > 其他好文 > 详细

VUE 点击事件(父子层级元素点击时踩坑记录)

时间:2018-05-09 12:13:34      阅读:1495      评论:0      收藏:0      [点我收藏+]

标签:create   data   两种方法   htm   asc   点击事件   ==   nbsp   java   

<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;
                	},
              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

 

VUE 点击事件(父子层级元素点击时踩坑记录)

标签:create   data   两种方法   htm   asc   点击事件   ==   nbsp   java   

原文地址:https://www.cnblogs.com/liangjing-yy/p/9013061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!