在使用ivew的轮播图的时候,在轮播图上添加了一些div,并且绑定了@click事件,但是发现一个奇怪的问题,每次banner轮播的时候,会有一次 绑定的click无法点击,只有在下一次banner显示的时候才能点击
于是我想到,通过ref获取到这个元素,动态的给他添加上@click事件或许能解决我的问题
所以想问问我现在通过ref获取到了这个元素,我应该怎么给这个元素绑定@click事件
==============================================================
这是iview 轮播图组件的问题
我在<CarouselItem>
中写了一些div,跟随<CarouselItem>
轮播而轮播,里面有个div 绑定了一个@click事件,
但是这个按钮,每次轮播到当前,有一次是无法点击的
比如第一次轮播到当前 可以点击,
下一次轮播到当前,无法点击,
一直处于 可以点击-无法点击-可以点击-无法点击 这样的状态
`
<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')}} <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>
`
首先回答你的问题
然后呢,建议在vue中不要直接去操作dom,就类似于这种自己去添加点击事件,可以直接在template里面@click去绑定的,出现你说的那些诡异的现象,多半是事件冒泡了,你可以通过vue的事件修饰符去解决这些问题,题主先自己试试吧,你没贴代码,我也不好判断具体是不是事件冒泡的问题。