羊羽亻子
羊羽亻子
  • 发布:2015-08-11 17:45
  • 更新:2017-11-18 16:40
  • 阅读:5711

在下拉刷新和上拉加载例子中的A无法触发click事件。

分类:MUI
mui

更新MUI.JS,V2.1.0之后,项目中的所有默认下拉和上拉中的事件全部失效了,特意在hellomui例子中测试了一次,也是失效,请查找下问题。就是hellomui的pullrefresh_sub.html,仅仅在加载中的A添加了onclick="alert(3333)",以前的版本都没问题。

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="../css/mui.min.css">  
    </head>  

    <body>  
        <!--下拉刷新容器-->  
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <!--数据列表-->  
                <ul class="mui-table-view mui-table-view-chevron">  

                </ul>  
            </div>  
        </div>  
        <script src="../js/mui.min.js"></script>  
        <script>  
            mui.init({  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentrefresh: '正在加载...',  
                        callback: pullupRefresh  
                    }  
                }  
            });  
            /**  
             * 下拉刷新具体业务实现  
             */  
            function pulldownRefresh() {  
                setTimeout(function() {  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for (var i = cells.length, len = i + 3; i < len; i++) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right" onclick="alert(3333)">Item ' + (i + 1) + '</a>';  
                        //下拉刷新,新纪录插到最前面;  
                        table.insertBefore(li, table.firstChild);  
                    }  
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                }, 1500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */  
            function pullupRefresh() {  
                setTimeout(function() {  
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for (var i = cells.length, len = i + 20; i < len; i++) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right" onclick="alert(4444)">Item ' + (i + 1) + '</a>';  
                        table.appendChild(li);  
                    }  
                }, 1500);  
            }  
            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }  
        </script>  
    </body>  

</html>
2015-08-11 17:45 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

click确实被屏蔽了,mui不推荐使用onclick,建议使用tap事件。

列表项过多时,也不建议针对每一项进行事件监听,推荐使用mui(selector).on(event,selector,handle)进行事件委托,例如:

mui("#list").on('tap','a',function(){  
  //业务逻辑  
})
  • OK蹦蹦跳

    但是无论是mui的tap还是zepto的tap,都会执行两次,这是什么原因呢?

    2015-09-22 11:42

  • DCloud_UNI_CHB

    两个框架重复绑定了,移除zepto.js的引用试试。

    2015-09-22 13:35

  • yangyang

    尼玛这么大的事情也不通知一声~~

    2015-11-19 15:55

老牛在路上

老牛在路上

我也遇到这个问题,还好看楼上回复解决了。

1***@163.com

1***@163.com

为什么我还是不可以,只能点击一次

羊羽亻子

羊羽亻子 (作者)

将MUI.js里面4052行的e.preventDefault();注释掉就可以了,是不是这里还有点bug?

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