vue中通过ref获取到元素,如何给元素绑定点击事件?

在使用ivew的轮播图的时候,在轮播图上添加了一些div,并且绑定了@click事件,但是发现一个奇怪的问题,每次banner轮播的时候,会有一次 绑定的click无法点击,只有在下一次banner显示的时候才能点击

于是我想到,通过ref获取到这个元素,动态的给他添加上@click事件或许能解决我的问题

所以想问问我现在通过ref获取到了这个元素,我应该怎么给这个元素绑定@click事件

==============================================================

这是iview 轮播图组件的问题
我在<CarouselItem>中写了一些div,跟随<CarouselItem>轮播而轮播,里面有个div 绑定了一个@click事件,
但是这个按钮,每次轮播到当前,有一次是无法点击的
比如第一次轮播到当前 可以点击,
下一次轮播到当前,无法点击,
一直处于 可以点击-无法点击-可以点击-无法点击 这样的状态

clipboard.png

`
<Carousel @on-change="bannerIndex" class="banner-box" loop dots="inside" :autoplay="!clickLQ" :autoplay-speed="4000" arrow="hover" :height="600">

    <CarouselItem>
      <div class="bannerimg-box" :style="{backgroundImage:'url(/static/images/banner_01.png)'}"></div>
      <div class="slogan-center" :class="{'en_slogan':$store.state.lang == 'en' ? true:false}">
        <div class="text-slogan-name">{{$t('home.sloganName')}}</div>
        <div class="text-slogan-content">{{$t('home.sloganContent1')}}</div>
        <div class="text-slogan-content">{{$t('home.sloganContent2')}}</div>
        <img class="ball" src="/static/images/banner_ball2.png" alt="">
        <div class="coming-soon">{{$t('home.coming_soon')}}</div>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="bannerimg-box" :style="{backgroundImage:'url(/static/images/banner_02.jpg)'}"></div>
      <div class="banner2">
        <div class="banner2_title">{{$t('home.banner2_title')}}</div>
        <div class="banner2_1_text">{{$t('home.banner2_1_text')}}</div>
        <div class="banner2_2_text">{{$t('home.banner2_2_text')}}</div>
        <div class="btn_login_register">
          <div v-if="!$store.state.login">
            <a :href="$store.state.trans_url+'/login'" class="btn_login" >{{$t('home.btn_login')}}</a>
            <a :href="$store.state.trans_url+'/register'" class="btn_register" >{{$t('home.btn_register')}}</a>
          </div>
          <div v-if="$store.state.login">
            <a :href="$store.state.trans_url+'/account/invite'" class="btn_yq" >{{$t('home.btn_yq')}}</a>
          </div>
          <div class="tips_text">
            {{$t('home.tips_text1')}} &nbsp;<span ref="bindClickYq" @click="lingquBtn(!$store.state.login ? true : $store.state.myInfo.airDropStatus ? true:false)">{{$t('home.tips_text2')}}</span>
          </div>
        </div>
      </div>
    </CarouselItem>
  </Carousel>
`
阅读 20.5k
2 个回答

首先回答你的问题

通过ref获取到了这个元素,我应该怎么给这个元素绑定@click事件
假如你有个ref=dom的div,this.$refs.dom就直接是这个具体的dom元素了,你可以把它打印出来,然后是绑定事件this.$refs.dom.addEventListener('click',function(){});

然后呢,建议在vue中不要直接去操作dom,就类似于这种自己去添加点击事件,可以直接在template里面@click去绑定的,出现你说的那些诡异的现象,多半是事件冒泡了,你可以通过vue的事件修饰符去解决这些问题,题主先自己试试吧,你没贴代码,我也不好判断具体是不是事件冒泡的问题。

试试this.$refs.dom.$el.addEventListener?(dom为你要绑定的元素)因为你要绑定的是个组件,所以要获取组件下面的元素$el,如果是普通的html标签就直接this.$refs.dom.addEventListener就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题