[問題貼]mui.openWindow+自定義事件監聽操做讓alert()執行兩次

時間 2019-12-10

標籤問題 mui.openwindow mui openwindow 自定義事件監聽 alert 執行兩次欄目 JavaScript 简体版

原文原文鏈接

仔細看，Alert函數執行了兩次

共兩個頁面：index.html和detail.html,

detail.html爲按鈕設置了自定義事件監聽(newsId)，觸發alert.

在index.html點擊按鈕就會觸發事件newsId,並用mui.openWindow()打開detail.html頁面。javascript

而後我有兩個問題：

1. 就是上面提到的alert執行兩次？

2. 就是有時候點擊按鈕並不會有任何操做，是文檔沒有加載完畢可能，有什麼解決方法嗎？html

具體代碼以下：java

// ---index.html

<body>
    <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">新聞頁面</h1>
    </header>
    <div class="mui-content">
        <a id="pen" class="mui-btn mui-btn-blue">鋼筆事件</a>
        <a id="book" class="mui-btn mui-btn-blue">書籍事件</a>
        <a id="teacher" class="mui-btn mui-btn-blue">教師事件</a>       
    </div>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init({
            //初始化預加載詳情頁面
            preloadPages:[{
                id:'detail.html',
                url:'detail.html'
            }]
        });
        mui.plusReady(function () {
           alert('plusReady()執行成功!'); 
        });

        var detailPage = null;
        // 添加列表項的點擊事件
        mui('.mui-content').on('tap','a',function(e) {
            var id = this.getAttribute('id');
            //得到詳情頁面
            if(!detailPage) {
                detailPage = plus.webview.getWebviewById('detail.html');
            }
            //觸發詳情頁面的newsId事件
            mui.fire(detailPage,'newsId',{
                id:id
            });
            //打開詳情頁面
            mui.openWindow({
                id:'detail.html'
            });
        });
    </script>
</body>

//---detail.html

<body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">詳情頁</h1>
        </header>
        <div class="mui-content">
            <div id="showId"></div>
            <div class="mui-bar-footer mui-bar mui-text-center"><a class="mui-btn mui-btn-blue">回到新聞頁</a></div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            //添加newsId自定義時間監聽
            window.addEventListener('newsId',function(event){
                //得到事件參數
                var id = event.detail.id;
                //將id顯示在詳情頁上
                alert(id);  // 會出現兩次是爲何？
                var showId = document.getElementById('showId');
                showId.innerText = id;
            });

            //添加列表點擊事件
            mui('.mui-content').on('tap', 'a', function(e){
                mui.openWindow({
                    url:'index.html',
                    id:'index.html',
                    createNew:true       //從新出發index.html頁面的plusReady()函數
                });
            });
        </script>
    </body>

------待解決--------web