飞翔的拖鞋up
飞翔的拖鞋up
  • 发布:2015-01-31 13:10
  • 更新:2016-03-02 11:39
  • 阅读:6201

使用侧滑菜单后,元素上的onclick事件无法执行,a标签无法跳转,为什么?

分类:MUI
<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <script src="js/template.js"></script>  
        <script src="js/fastclick.js"></script>  
        <script src="js/zepto.min.js"></script>  
        <script src="js/constant.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link href="css/ews.css" rel="stylesheet" />  
    </head>  

    <body>  
        <!-- 侧滑导航根容器 -->  
        <div class="mui-off-canvas-wrap mui-draggable">  
            <!-- 菜单容器 -->  
            <aside id="offCanvas" class="mui-off-canvas-left">  
                <div class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <!-- 菜单具体展示内容 -->  
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">  
                            <li class="mui-table-view-cell">  
                                关于  
                            </li>  
                            <li class="mui-table-view-cell">  
                                完全退出  
                            </li>  
                            <li class="mui-table-view-cell" id="min" onclick="doAlert()">  
                                最小化退出  
                            </li>  
                        </ul>  
                        <div>  
                        </div>  
            </aside>  
            <!-- 主页面容器 -->  
            <div class="mui-inner-wrap">  
                <!-- 主页面标题 -->  
                <header class="mui-bar mui-bar-nav">  
                    <a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>  
                    <h1 class="mui-title">标题</h1>  
                </header>  
                <div class="mui-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view" id="page-container">  
                        </ul>  
                    </div>  
                </div>  
                <nav class="mui-bar mui-bar-tab">  
                    <div class="ews-footer">标题</div>  
                </nav>  
            </div>  
            </div>  
            <script type="text/html" id="page-tpl">  
                {{each data as value i}}  
                <li code="{{value.code}}" class="mui-table-view-cell" onclick="openUrl('{{value.code}}')">{{value.name}}<span class="mui-badge" id="{{value.code}}"></span>  
                </li>  
                {{/each}}  
            </script>  
    </body>  

</html>  
<script type="text/javascript" charset="utf-8">  
    function doAlert(){  
        alert(123);  
    }  
    var mask = mui.createMask(function() {}); //callback为用户点击蒙版时自动执行的回调;  

    mui.plusReady(function() {  

        mui.ajax(collectorUrl, {  
            dataType: 'json', //服务器返回json格式数据  
            type: 'post', //HTTP请求类型  
            timeout: 0, //超时时间设置为10秒;  
            success: function(data) {  
                var html = template('page-tpl', {  
                    "data": data  
                });  
                $("#page-container").html(html);  
                polling();  
            },  
            error: function(xhr, type, errorThrown) {  
                console.log("网络异常");  
            }  
        });  

    });  

    mui('#page-container').on('tap', 'li', function(e) {  
        var code = this.getAttribute('code');  
        openUrl(code);  
    });  

    function openUrl(code) {  

        mui.openWindow({  
            url: "view/collector.html",  
            show: {  
                autoShow: true, //页面loaded事件发生后自动显示,默认为true  
                aniShow: "slide-in-right", //页面显示动画,默认为”slide-in-right“;  
                duration: 200 //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;  
            },  
            waiting: {  
                autoShow: true, //自动显示等待框,默认为true  
                title: '正在加载...'  
            },  
            extras: {  
                code: code  
            }  
        });  
    }  

    function polling() {  

        mui.ajax(statusUrl, {  
            dataType: 'json', //服务器返回json格式数据  
            type: 'post', //HTTP请求类型  
            timeout: 0, //超时时间设置为10秒;  
            success: function(data) {  
                $.each(data, function(index, item) {  
                    if (item.class == "") {  
                        $("#" + item.key).removeClass();  
                        $("#" + item.key).addClass("mui-badge");  
                        $("#" + item.key).html(item.value);  
                    } else {  
                        if (item.value == "报警") {  
                            plus.push.createMessage("监测点数据超标,请点击查看", "", {  
                                title: "老港镇环境预警"  
                            });  
                        }  
                        $("#" + item.key).removeClass();  
                        $("#" + item.key).addClass("mui-badge");  
                        $("#" + item.key).addClass(item.class);  
                        $("#" + item.key).html(item.value);  
                    }  
                });  

                setTimeout(polling, 120000);  
            },  
            error: function(xhr, type, errorThrown) {  
                console.log("网络异常");  
            }  
        });  
    }  
</script>  

这是完整的页面代码,请问为什么?
2015-01-31 13:10 负责人:无 分享
已邀请:
sunnysat

sunnysat

mui('.mui-scroll-wrapper').on('tap','a' ,function(){location.href = this.getAttribute('href')})

之前也遇到过这样的问题。添加上面一句就好。

  • fitzdemo

    解决了,谢谢你啊

    2016-06-24 10:51

  • 渐忘丶

    添加到哪?

    2017-03-16 17:21

DCloud_UNI_FXY

DCloud_UNI_FXY

点击事件,建议统一使用我们的tap事件。

  • 诺墨

    觉得有点坑。。。为何一定用统一的。。。这算是bug?

    2015-03-03 00:35

  • DCloud_UNI_FXY

    那是因为onclick在很多版本的手机上是有300ms的延迟的

    2015-03-03 02:59

  • Ulrica

    想问下怎么写呢……能不能举个例子

    2016-03-02 10:03

  • 9***@qq.com

    主界面容器内 使用contenteditable="true" 也没效果

    2018-03-09 17:59

fishmankkk

fishmankkk

我也遇到了侧滑菜单 主页面内容 <a href="..">无法跳转的问题

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