前端-mui框架的div侧拉菜单，导致页面中按钮的点击事件无法响应的问题

来源：互联网发布：上海行知中学初中部编辑：程序博客网时间：2024/05/22 09:02

前言

接手了服务端，也得搞点前端的东东，由于最近的任务是需要写一个有侧拉菜单的页面，而原有服务端项目的前端部分使用的是mui框架，刚好mui框架里有现成的侧拉菜单功能，那么就直接拿来用了. 开发中~~ 等差不多开发完了，却发现主页面的button、a元素等都无法响应点击事件，用了onclick=” 和jquery 绑定事件也是不响应，搞了半天，原来是mui框架存在的问题，为了避免有人再瞎折腾浪费时间，想想~赶忙做个笔记.

代码及解决

<body>    <!--侧滑菜单容器-->    <div id="offCanvasWrapper"  class="mui-content 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">                                <input type="hidden" id="dict_type_select" />                                <input type="hidden" id="info_type_select" />                                 <ul  class="ul_container">                                     <li class="mui-table-view-cell mui-collapse">                                        <a class="mui-navigate-right" href="#"><span>更多</span><strong>种类</strong></a>                                        <div class="mui-collapse-content">                                            <div id="div_container"  th:each="dictType,iterStat:${dictTypes}">                                                <button type="button" th:text="${dictType.dictDesc}" data-status="" data-type="dict_type" th:id="${dictType.dictVal}">税种分类</button>                                            </div>                                        </div>                                    </li>                                 </ul>                                <ul  class="ul_container">                                    <li class="mui-table-view-cell mui-collapse">                                             <a class="mui-navigate-right" href="#"><span>更多</span><strong>价钱</strong></a>                                           <div class="mui-collapse-content">                                                <div id="div_container" th:each="infoType,iterStat:${infoTypes}">                                                    <button type="button" th:text="${infoType.typeName}" data-status="" data-type="info_type" th:id="${infoType.id}">类别</button>                                                </div>                                        </div>                                    </li>                                 </ul>                            </div>                                <div id="btn_container" class="mui-bar mui-bar-tab">                                    <div class="mui-btn" id="cancel">取消</div>                                    <div class="mui-btn mui-btn-primary" id="confirm">确定</div>                                 </div>                        </div>                    </aside>            <div class="mui-inner-wrap">                <!--  下面的a标签点击,无反应-->                 <header class="mui-bar mui-bar-nav header">                        <a onclick="alert('a---onclick')" class="mui-icon mui-icon-back mui-pull-left back"></a>                        <a href="#offCanvasSide" class="mui-icon mui-icon-search mui-icon-right mui-pull-right"></a>                        <h1 class="mui-title">超市</h1>                </header>                <!--下拉刷新容器-->                <div id="pullrefresh" class="mui-content mui-fullscreen mui-scroll-wrapper">                    <div class="mui-bar mui-bar-nav" id="search">                            <div class="topbar-so">                                <div class="ui_flex">                                    <div class="ui_flex-hd"><i class="iconfont">&#xe650;</i><input placeholder="搜索" type="text" id="_search"/></div>                                </div>                            </div>                    </div>                     <div class="mui-scroll list" id="scroll1">                        <input type="hidden" id="search_cursor" />                        <!--数据列表-->                        <div class="v38casebox">                            <div class="tuijian_item" id="case_list" style="margin-top:0">                                <div class="mui-loading">                                    <div class="mui-spinner"></div>                                </div>                            </div>                        </div>                    </div>                </div>                  <div id="backdrop" class="mui-off-canvas-backdrop"></div>            </div>    </div></body>

上面的就是主要的标签样式，主要是侧拉菜单和主页面，而主页面的a标签点击无反应

怎么解决？

之所以点击无反应，是因为mui框架不推荐使用onclic或href跳转，其实把涉及侧拉菜单部分的代码删除掉，onclick事件是可以响应的，但目前的需求是既要有侧拉菜单，还得有主页面因点击而触发响应事件的a标签，解铃还须系铃人，mui也提供了解决方案，看下面代码

<script>    mui('.header').on('tap','a.back',function(e){        callback('');    });</script>

是的，mui框架不推荐使用onclick(会有300ms延迟)，或href跳转(会出现白屏现象).
建议使用事件委托监听tap事件,这样就解决了.

阅读全文

0 0