前言
接手了服務端，也得搞點前端的東東，由於最近的任務是需要寫一個有側拉菜單的頁面，而原有服務端項目的前端部分使用的是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"></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事件,這樣就解決了.