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

最新推荐文章于 2024-05-06 16:13:57 发布

巨头之路

最新推荐文章于 2024-05-06 16:13:57 发布

阅读量4.7k

点赞数 1

分类专栏： Web 文章标签： mui 前端侧拉菜单

本文链接：https://blog.csdn.net/yk377657321/article/details/77927436

版权

Web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前言

接手了服务端，也得搞点前端的东东，由于最近的任务是需要写一个有侧拉菜单的页面，而原有服务端项目的前端部分使用的是mui框架，刚好mui框架里有现成的侧拉菜单功能，那么就直接拿来用了. 开发中~~ 等差不多开发完了，却发现主页面的button、a元素等都无法响应点击事件，用了οnclick=” 和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事件,这样就解决了.

巨头之路

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端-mui框架的div侧拉菜单，导致页面中按钮的点击事件无法响应的问题

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

扫一扫