仔细看，Alert函数执行了两次

共两个页面：index.html和detail.html,

detail.html为按钮设置了自定义事件监听(newsId)，触发alert.

在index.html点击按钮就会触发事件newsId,并用mui.openWindow()打开detail.html页面。

然后我有两个问题：

1. 就是上面提到的alert执行两次？

2. 就是有时候点击按钮并不会有任何操作，是文档没有加载完毕可能，有什么解决方法吗？

具体代码如下：

// ---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>

　　

------待解决--------

[问题贴]mui.openWindow+自定义事件监听操作让alert()执行两次的更多相关文章

  1. Java Spring 自定义事件监听

    ApplicationContext 事件 定义一个context的起动监听事件 import org.springframework.context.ApplicationListener; imp ...

  2. cocos2d-js 自定义事件监听派发

    熟悉js的dom事件或者flash事件的,基本都能立马明白cc.eventManager的用法. cc.eventManager有两种注册监听器的方式,一种是原生事件,例如 cc.eventManag ...

  3. clipboard 在 vue 项目中，on 事件监听回调多次执行

    clipboard 定义一个全局变量 import ClipboardJS from "clipboard"; if(clipboard){ clipboard.destroy() ...

  4. JAVA自定义事件监听完整例子---sunfruit[转]

    http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece763105392230e54f733628a854d2c90c05f9313071601 ...

  5. Spring Boot实践——事件监听

    借鉴:https://blog.csdn.net/Harry_ZH_Wang/article/details/79691994 https://blog.csdn.net/ignorewho/arti ...

  6. SpringBoot框架(6)--事件监听

    一.场景:类与类之间的消息通信,例如创建一个对象前后做拦截,日志等等相应的事件处理. 二.事件监听步骤 (1)自定义事件继承ApplicationEvent抽象类 (2)自定义事件监听器,一般实现Ap ...

  7. Zookeeper Curator 事件监听 - 秒懂

    目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...

  8. spring事件监听（eventListener)

    原理:观察者模式 spring的事件监听有三个部分组成,事件(ApplicationEvent).监听器(ApplicationListener)和事件发布操作. 事件 事件类需要继承Applicat ...

  9. 关于实现自定义Dialog和实现Dialog里view的事件监听的两种方法

    一.自定义dialog. 二.实现dialog里view的事件监听 1.自定义dialog比较简单.在实例化new的时候,加入样式,布局就行了.或者重写dialog. 2.实现dialog里view的 ...

随机推荐

  1. AndroidStudio升级后出现Refresh gradle project和connection timed out的原因和解决方法

    笔者发现现在升级AndroidStudio不需要FQ了,于是在看到了升级提醒后手贱点击了升级.可悲剧的一幕发生了, 正在写的一个项目从上到下密密麻麻的错误,看了一下提示要求升级Gradle 那就升级吧 ...

  2. Nginx VS Apache

    作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接,体现更高的效率 Nginx 静态处理性能比 Apache 高 3倍以上 最核心的区别在于apache是同步多进 ...

  3. JavaScript Break 和 Continue 语句

    1.break:终止本层循坏,继续执行本次循坏后面的语句: 当循坏有多层时,break只会跳过一层循坏 2.continue:跳过本次循坏,继续执行下次循坏 对于for循环,continue执行后,继 ...

  4. IC卡读卡器在安卓(android)下的开发

    友我科技推出IC卡读卡器的Android开发包,软件工程师只需要导入jar类库文件,就可以在App中操作IC卡读卡器了. 目前IC卡读卡器的Android开发包开放操作的卡类型有:M1, S50, U ...

  5. Java常用的八种排序算法与代码实现

    1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直 ...

  6. 百度Web前端面试经历

    今天面了百度的前端实习职位.一面.时间大概是50分钟.面试官是位很帅气的小伙子,非常友好的一个人.进门的时候他让我等一会,我瞄了一眼他的电脑屏幕,发现他在coding…… 9点50开始的面试. 面试官 ...

  7. java多线程基本概述（三）——同步方法

    非线程安全其实是在多个线程对同一个对象实例的变量进行并发访问的时候发生,产生的后果就是脏读,也就是取到的数据是修改过的.而线程安全就是获得的实例变量的值是经过同步处理的,从而不会出现脏读现象. 1.1 ...

  8. Java 比较（==, equals, compareTo, compare)

    在Java中,有 ==, equals(), compareTo(), compare() 等方法可以比较两个值或对象,比较容易混淆.画了个简单的思维导图总结一下 Java Compares 我经常记 ...

  9. 腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs

    [原文链接] ## 写在前面 curvejs 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 ...

  10. python——模块

    一.导入模块 Python之所以应用越来越广泛,在一定程度上也依赖于其为程序员提供了大量的模块以供使用,如果想要使用模块,则需要导入.导入模块有一下几种方法: 1 import module 2 fr ...