关于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操作,不然就会不停地循环执行。

发布了32 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_40088443/article/details/88743780
今日推荐