mui日期選擇器彈出兩次的解決方法

milky_liu發表於2016-09-14

今天在用mui做日期選擇的時候,發現日期彈出視窗彈出兩次,程式碼並無問題,後來測試發現js被呼叫了兩次,DtPicker程式碼如下:

/*日期選擇*/
        (function($) {
            $.init();
            var result = $('#result')[0];
            var btns = $('.btn');
            btns.each(function(i, btn) {
                btn.addEventListener('tap', function() {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次顯示時例項化元件
                     * 示例為了簡潔,將 options 放在了按鈕的 dom 上
                     * 也可以直接通過程式碼宣告 optinos 用於例項化 DtPicker
                     */
                    var picker = new $.DtPicker(options);
                    picker.show(function(rs) {
                        /*
                         * rs.value 拼合後的 value
                         * rs.text 拼合後的 text
                         * rs.y 年,可以通過 rs.y.vaue 和 rs.y.text 獲取值和文字
                         * rs.m 月,用法同年
                         * rs.d 日,用法同年
                         * rs.h 時,用法同年
                         * rs.i 分(minutes 的第二個字母),用法同年
                         */
                        result.innerText = ' ' + rs.text;
                        /* 
                         * 返回 false 可以阻止選擇框的關閉
                         * return false;
                         */
                        /*
                         * 釋放元件資源,釋放後將將不能再操作元件
                         * 通常情況下,不需要示放元件,new DtPicker(options) 後,可以一直使用。
                         * 當前示例,因為內容較多,如不進行資原釋放,在某些裝置上會較慢。
                         * 所以每次用完便立即呼叫 dispose 進行釋放,下次用時再建立新例項。
                         */
                        picker.dispose();
                    });
                }, false);
            });
        })(mui);

發現上述程式碼中new語句執行了兩次,因為看到是為btn加了tap事件,所以想到是不是因為mui監聽的tap和自己新增的tap衝突,於是禁用了mui的tap監聽

mui.init({
        //禁用mui tap監聽 否則點選生日選擇會彈出兩次
        gestureConfig:{
            tap:false
        }
    });

問題解決!(開心)

相關文章