9***@qq.com
9***@qq.com
  • 发布:2016-09-26 09:57
  • 更新:2016-09-27 22:00
  • 阅读:3077

offcanvas-drag-left.html手机web a标签触屏失效

分类:MUI

详细问题描述
[内容]
offcanvas-drag-left.html页面在手机浏览器下面<div class="mui-scroll">内的a标签 全部不能点击。换成电脑浏览器可以点击
重现步骤

[代码片段]

<!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">  
        <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
            p {  
                text-indent: 22px;  
            }  
            span.mui-icon {  
                font-size: 14px;  
                color: #007aff;  
                margin-left: -15px;  
                padding-right: 10px;  
            }  
            .mui-off-canvas-right {  
                color: #fff;  
            }  
            .title {  
                margin: 35px 15px 10px;  
            }  
            .title+.content {  
                margin: 10px 15px 35px;  
                color: #bbb;  
                text-indent: 1em;  
                font-size: 14px;  
                line-height: 24px;  
            }  
            input {  
                color: #000;  
            }  
        </style>  
    </head>  

    <body>  
        <!--侧滑菜单容器-->  
        <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">  
            <!--菜单部分-->  
            <aside id="offCanvasSide" class="mui-off-canvas-right">  
                <div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <div class="title">侧滑导航</div>  
                        <div class="content">  
                            这是可拖动式侧滑菜单示例,你可以在这里放置任何内容;关闭侧滑菜单有多种方式: 1.在手机屏幕任意位置向右拖动(drag);2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮  
                            <span class="android-only">;4.Android手机按back键;5.Android手机按menu键  
                            </span>。  
                            <p style="margin: 10px 15px;">  
                                <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>  
                            </p>  

                        </div>  
                        <div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>  
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">  
                            <li class="mui-table-view-cell">  
                                <a class="mui-navigate-right">  
                                    Item 1  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell">  
                                <a class="mui-navigate-right">  
                                    Item 2  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell">  
                                <a class="mui-navigate-right">  
                                    Item 3  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell">  
                                <a class="mui-navigate-right">  
                                    Item 4  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell">  
                                <a class="mui-navigate-right">  
                                    Item 5  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell">  
                                <a class="mui-navigate-right">  
                                Item 6  
                            </a>  
                            </li>  

                        </ul>  
                    </div>  
                </div>  
            </aside>  
            <div class="mui-inner-wrap">  
                <header class="mui-bar mui-bar-nav">  
                    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>  
                    <a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>  
                    <h1 class="mui-title">左滑导航</h1>  
                </header>  
                <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <div class="mui-content-padded">  
                            <p>这是可拖动式左滑导航示例,主页面和菜单在一个HTML文件中, 优点是支持拖动手势(跟手),缺点是不支持菜单内容在多页面的复用; 当前页面为主界面,你可以在主界面放置任何内容; 打开侧滑菜单有多种方式: 1、在当前页面向左拖动; 2、点击页面右上角的  
                                <span class="mui-icon mui-icon-bars"></span> 图标; 3、通过JS API触发(例如点击如下蓝色按钮体验);  
                                <span class="android-only">4、Android手机按menu键;</span>  
                            </p>  
                            <p style="padding: 5px 20px;margin-bottom: 5px;">  
                                <button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">  
                                    显示侧滑菜单  
                                </button>  
                            </p>  
                            <p><a href="http://baidu.com">侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:</a></p>  
                            <p><a href="http://baidu.com">侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:</a></p>  
                            <p><a href="http://baidu.com">侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:</a></p>  
                            <p><a href="http://baidu.com">侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:</a></p>  
                            <p><a href="http://baidu.com">侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:</a></p>  

                        </div>  

                        <form class="mui-input-group" style="margin-bottom: 15px;">  
                            <div class="mui-input-row mui-radio">  
                                <label>主界面移动、菜单不动</label>  
                                <input name="style" type="radio" checked="" value="main-move">  
                            </div>  
                            <div class="mui-input-row mui-radio">  
                                <label>主界面不动、菜单移动</label>  
                                <input name="style" type="radio" value="menu-move">  
                            </div>  
                            <div class="mui-input-row mui-radio mui-hidden" id="move-togger">  
                                <label>整体移动</label>  
                                <input name="style" type="radio" value="all-move">  
                            </div>  
                            <div class="mui-input-row mui-radio">  
                                <label>缩放式侧滑(类手机QQ)</label>  
                                <input name="style" type="radio" value="main-move-scalable">  
                            </div>  
                        </form>  

                    </div>  
                </div>  
                <!-- off-canvas backdrop -->  
                <div class="mui-off-canvas-backdrop"></div>  
            </div>  
        </div>  
        <script src="../js/mui.min.js"></script>  
        <script>  
            mui.init({  
                swipeBack: false,  
            });  
             //侧滑容器父节点  
            var offCanvasWrapper = mui('#offCanvasWrapper');  
             //主界面容器  
            var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');  
             //菜单容器  
            var offCanvasSide = document.getElementById("offCanvasSide");  
             //Android暂不支持整体移动动画  
            if (!mui.os.android) {  
                document.getElementById("move-togger").classList.remove('mui-hidden');  
                var spans = document.querySelectorAll('.android-only');  
                for (var i = 0, len = spans.length; i < len; i++) {  
                    spans[i].style.display = "none";  
                }  
            }  
             //移动效果是否为整体移动  
            var moveTogether = false;  
             //侧滑容器的class列表,增加.mui-slide-in即可实现菜单移动、主界面不动的效果;  
            var classList = offCanvasWrapper[0].classList;  
             //变换侧滑动画移动效果;  
            mui('.mui-input-group').on('change', 'input', function() {  
                if (this.checked) {  
                    offCanvasSide.classList.remove('mui-transitioning');  
                    offCanvasSide.setAttribute('style', '');  
                    classList.remove('mui-slide-in');  
                    classList.remove('mui-scalable');  
                    switch (this.value) {  
                        case 'main-move':  
                            if (moveTogether) {  
                                //仅主内容滑动时,侧滑菜单在off-canvas-wrap内,和主界面并列  
                                offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);  
                                moveTogether = false;  
                            }  
                            break;  
                        case 'main-move-scalable':  
                            if (moveTogether) {  
                                //仅主内容滑动时,侧滑菜单在off-canvas-wrap内,和主界面并列  
                                offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);  
                            }  
                            classList.add('mui-scalable');  
                            break;  
                        case 'menu-move':  
                            classList.add('mui-slide-in');  
                            break;  
                        case 'all-move':  
                            moveTogether = true;  
                            //整体滑动时,侧滑菜单在inner-wrap内  
                            offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);  
                            break;  
                    }  
                    offCanvasWrapper.offCanvas().refresh();  
                }  
            });  
            document.getElementById('offCanvasShow').addEventListener('tap', function() {  
                offCanvasWrapper.offCanvas('show');  
            });  
            document.getElementById('offCanvasHide').addEventListener('tap', function() {  
                offCanvasWrapper.offCanvas('close');  
            });  
             //主界面和侧滑菜单界面均支持区域滚动;  
            mui('#offCanvasSideScroll').scroll();  
            mui('#offCanvasContentScroll').scroll();  
             //实现ios平台的侧滑关闭页面;  
            if (mui.os.plus && mui.os.ios) {  
                offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件  
                    plus.webview.currentWebview().setStyle({  
                        'popGesture': 'none'  
                    });  
                });  
                offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件  
                    plus.webview.currentWebview().setStyle({  
                        'popGesture': 'close'  
                    });  
                });  
            }  
        </script>  
    </body>  

</html>

联系方式
[QQ]956716282

2016-09-26 09:57 负责人:无 分享
已邀请:
赵梦欢

赵梦欢 - 专注前端,乐于分享!

9***@qq.com

9***@qq.com (作者)

谢谢 问题已得到解决

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