仔细看，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. 1136: 零起点学算法43——多组测试数据输出I

    1136: 零起点学算法43--多组测试数据输出I Time Limit: 1 Sec  Memory Limit: 128 MB   64bit IO Format: %lldSubmitted: ...

  2. 实现一个竖直的显示表头的表格（vue版本）

    今天遇到一个问题,实现这样一个竖直的显示表头的表格,如下图.默认显示两列. vue实现代码如下:   tableComponent.vue:   <template> <table ...

  3. Xcode新建python项目

    1.找到电脑上安装Python的路径.OSX系统默认安装了python,默认的路径为/usr/bin/python.不确定的情况下,也可以打开命令行,用 whereis python 命令查看 2.打 ...

  4. 如何给远程主机开启mysql远程登录权限

    # 如何给远程主机开启mysql远程登录权限 > 在千锋学习PHP的有些学员会在阿里或者腾讯云去购买自己的云服务器.在初级阶段的项目上线时会遇到一个问题,就是无法使用远程连接工具操作自己线上的m ...

  5. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  6. 读APUE分析散列表的使用

    最近学习APUE读到避免线程死锁的部分,看到部分源码涉及到避免死锁部分,源码使用了散列表来实现对结构(struct)的存储与查找. 本文不讨论代码中的互斥量部分. #include <stdli ...

  7. 【代码学习】MYSQL数据库的常见操作

    ---恢复内容开始--- ============================== MYSQL数据库的常见操作 ============================== 一.mysql的连接与 ...

  8. log4j.properties详细配置

    转自:http://blog.sina.com.cn/s/blog_5ed94d710101go3u.html ①配置根Logger,其语法为: #log4j.rootLogger = [level] ...

  9. mui开发app之html5+,5+Runtime,5+sdk,native.js

    说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...

  10. oracle表信息

    获取表: select table_name from user_tables; //当前用户的表 select table_name from all_tables; //所有用户的表 select ...