首页 > 其他 > 详细

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

时间:2018-05-09 11:41:37      阅读:373      评论:0      收藏:0      [点我收藏+]
<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 点击事件(父子层级元素点击时踩坑记录)

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!