slider组件如何实现图片点击事件

分类：MUI

使用下面的代码定义了一个slider来滚动播放图片列表，但是如何响应单个图片的tap事件并跳转到新的页面去呢？

<div id="slider" class="mui-slider">  
        <div class="mui-slider-group mui-slider-loop">  
            <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4.jpg"></a></div>  

            <div class="mui-slider-item"><a href="#"><img src="img/1.jpg"></a></div>      
            <div class="mui-slider-item"><a href="#"><img src="img/2.jpg"></a></div>  
            <div class="mui-slider-item"><a href="#"><img src="img/3.jpg"></a></div>  
            <div class="mui-slider-item"><a href="#"><img src="img/4.jpg"></a></div>  

            <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/1.jpg"></a></div>  
        </div>  

        <div class="mui-slider-indicator mui-text-right">  
            <div class="mui-indicator mui-active"></div>  
            <div class="mui-indicator"></div>  
            <div class="mui-indicator"></div>  
            <div class="mui-indicator"></div>  
        </div>  
    </div>

2015-07-09 21:53 负责人:无分享

6 个回复

DCloud_UNI_FXY

mui('#slider').on('tap','a',function(){  
console.log(this.href);  
});

BruceAn (作者)

问题已解决，非常感谢！

2015-08-03 09:31

BruceAn (作者)

使用下面的代码定义tap事件后，不起作用，Why：

    var sliders = document.querySelectorAll(".mui-slider-item>a>img");  
    for (var i = 0; i < sliders.length; i++)  
    {  
        sliders[i].addEventListener('tap',function(e)  
        {  
            console.debug(this.getAttribute('src')));  
        });  
    }

DCloud_UNI_CHB

你有没有看你的Hbuilder控制台错误信息？

console.debug(this.getAttribute('src')));

最后多了个括号。

BruceAn (作者)

Sorry，贴代码时多了一个括号。
实际运行时运行不到console输出这行代码，也就是tap事件定义无效。

是不是tap事件定义的元素不对？应该如何定义？

BruceAn (作者)

期待传说中的高手的出现！

BruceAn (作者)

自己再顶一下！

Slider组件如果不能响应点击事件，那还算个啥图片轮播组件啊，只能看不能点？

信不过你开车

直接onclick，，，，我做的是用的click

2015-08-03 09:59
BruceAn (作者)

是在a标签中定义onclick事件？我试试。

2015-08-03 11:46
信不过你开车

图片

2015-08-03 11:52

该问题目前已经被锁定, 无法添加新回复

slider组件如何实现图片点击事件

6 个回复

公告

相关问题

slider组件如何实现图片点击事件

与内容相关的链接

6 个回复

公告

相关问题