关于vue的@click传递

新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了,但是在vue里,this被赋予了特殊的含义,这样做并不可以。所以当碰上需要传递点击的这个元素时,可以用事件传递。在@click后面加上事件event。示例如下:

<div @click="test($event)"> </div>

然后Vue部分:
methods:{
 test:function(e){
  $(e.target).addClass("active");
 }
}

这样就可以给div元素点击时,增添active这个classname了。

但是在做的时候,我遇到一个问题,当我点击的div有多个内容,并不是空的时候,当我点击了这个div,实际传递过来的event可能是div的内部其他元素,并不是这个div....这个问题不知道怎么解决。。所以还是老老实实的用了jquery做了这个函数

 

 

__________________________________________

问题解决了。。。把target换成currentTarget

下面是网上找的解释

  • target指向,事件最终所作用于的对象
  • currentTarget指向,事件定义时所在的对象

__________________________________________________

项目中还发现了关于使用click出现了循环的现象,经过排查后发现,也是由于冒泡的原因。执行点击父元素操作时,内部操作不能出现其子元素的继续click操作,不然就会不停地循环执行。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值