iview中轮播图组件在loop自动播放时,添加的点击事件有时不触发

问题描述:使用iview中的Carousel组件并开启循环属性loop时,点击每个轮播图片时进行对应事件处理;但是轮播循环一周后,点击轮播图片时点击事件并没有触发;

问题产生原因:

        因为开启loop循环属性后,生成的HTML代码里有两个一模一样的div节点,但是点击事件只绑定在了第一个div里的子节点上;第二个div中的子节点没有该点击事件;所以导致循环播放第二个div中的内容时,是触发不了我们绑定的点击事件;

iview中轮播图组件在loop自动播放时,添加的点击事件有时不触发_第1张图片

第一个div中子节点的点击事件:该事件就是我们手动添加的事件;

iview中轮播图组件在loop自动播放时,添加的点击事件有时不触发_第2张图片 第二个div中的子节点没有我们手动添加的事件;iview中轮播图组件在loop自动播放时,添加的点击事件有时不触发_第3张图片

刚开始时点击事件添加在每个轮播块CarouselItem上;代码如下:


   
      
    
 

解决方案:

       方案1: 去掉loop循环属性;

       方案2:点击事件添加到父节点上,通过事件委托的方式进行子节点事件的处理,代码如下:

        在Carousel外层添加一个div标签,将点击事件绑在该标签上; (注意:如果直接将点击事件绑在Carousel标签上,还是会有问题;)然后在img标签上通过data-*的方式嵌入自定义数据,用于标识当前点击的子节点;

data-*的用法可参考链接:HTML data-* 属性

你可能感兴趣的:(Vue,html5,vue.js)