前言
接手了服务端,也得搞点前端的东东,由于最近的任务是需要写一个有侧拉菜单的页面,而原有服务端项目的前端部分使用的是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"></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事件,这样就解决了.