问题描述:使用iview中的Carousel组件并开启循环属性loop时,点击每个轮播图片时进行对应事件处理;但是轮播循环一周后,点击轮播图片时点击事件并没有触发;
问题产生原因:
因为开启loop循环属性后,生成的HTML代码里有两个一模一样的div节点,但是点击事件只绑定在了第一个div里的子节点上;第二个div中的子节点没有该点击事件;所以导致循环播放第二个div中的内容时,是触发不了我们绑定的点击事件;
第一个div中子节点的点击事件:该事件就是我们手动添加的事件;
第二个div中的子节点没有我们手动添加的事件;
刚开始时点击事件添加在每个轮播块CarouselItem上;代码如下:
<Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false"
:autoplay-speed="2500" arrow="always">
<CarouselItem v-for="(item, index) in bannerItem.data" :key="index"
@click.native="pushRouter(item.pathType, item.path)">
<img :src="item.pic" alt="">
</CarouselItem>
</Carousel>
解决方案:
方案1: 去掉loop循环属性;
方案2:点击事件添加到父节点上,通过事件委托的方式进行子节点事件的处理,代码如下:
在Carousel外层添加一个div标签,将点击事件绑在该标签上; (注意:如果直接将点击事件绑在Carousel标签上,还是会有问题;)然后在img标签上通过data-*的方式嵌入自定义数据,用于标识当前点击的子节点;
data-*的用法可参考链接:HTML data-* 属性
<div @click="pushRouter($event)">
<Carousel class="Carousel-list" :autoplay="getAuto" loop :radius-dot="false"
:autoplay-speed="2500" arrow="always" :ref="bannerItem.id" >
<CarouselItem v-for="(item, index) in bannerItem.data" :key="index">
<img :src="item.pic" alt="" :data-id="item.id" :data-path="item.path"
:data-path-type="item.pathType">
</CarouselItem>
</Carousel>
</div>
<script>
private pushRouter (e) {
const { path, pathType: type, id} = e.target.dataset
if(e.target.type === 'button' || !id) return
if (+type === 0) {
return false
} else {
this.handleLink(+type, path)
}
}
</script>