仔细看，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. Git与Github的使用学习

    摘要 本文讲解下Git的使用,包括使用Git上传项目工程到Github,文末有彩蛋哦. 1.安装Git 使用apt-get安 sudo apt-get update sudo apt-get inst ...

  2. Struts2基础学习(七)—值栈和OGNL

    目录: 一.值栈 二.OGNL表达式 一.值栈(ValueStack) 1.定义      ValueStack贯穿整个Acton的生命周期,每个Action类的对象实例都拥有一个ValueStack ...

  3. 1135: 零起点学算法42——多组测试数据（求和)IV

    1135: 零起点学算法42--多组测试数据(求和)IV Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitted ...

  4. java nio（一）buffer

    概述 常见的网络io分为两种情况,BIO(block-io)和NIO(non-block-io),分别位于java.io和java.nio. BIO,是阻塞的io,采用一个线程处理一个连接的方式,就算 ...

  5. ajax多次请求，只执行最后一次的方法

    ajax多次请求,只执行最后一次的方法 有时候点击按钮进行异步请求数据的时候可能网络差,用户会点击很多次,或者页面有很多相同的按钮,参数不同,但是调用的ajax相同,只想得到最后一次结果 我的思路是用 ...

  6. .Net Core的一些个人总结

    从开始接触.Net Core到现在已经有将近一年的时间了,今天来做一下相关的学习总结,顺便也回忆一下自己这段时间以来的成长. 有一点不得不承认的是,在接触.Net Core之前,我对于linux系统一 ...

  7. Azure IoT 技术研究系列4-Azure IoT Hub的配额及缩放级别

    上两篇博文中,我们介绍了将设备注册到Azure IoT Hub,设备到云.云到设备之间的通信: Azure IoT 技术研究系列2-设备注册到Azure IoT Hub Azure IoT 技术研究系 ...

  8. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  9. 自定义TextView跑马灯

    本篇主要介绍TextView的可控制跑马灯效果实现. Android自带的TextView添加几个属性就可以实现跑马灯效果,大概是这样 android:ellipsize="marquee& ...

  10. bzoj4514 [Sdoi2016]数字配对

    Description 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对 ...