仔细看,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. boostrap详情解毒

    详解Bootstrap表单组件 表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  ...

  2. Oracle的基本学习(一)—安装Oracle

    一.Oracle环境搭建 1.安装Oracle 10g      我们把Orcale安装到虚拟机上,远程连接. (1)解压文件10201_database_win32.zip,并双击解压目录下的set ...

  3. ios 获取当前设备信息、内存

    //在[UIDevice currentDevice]中的属性 @property(nonatomic,readonly,strong) NSString *name; // e.g. "M ...

  4. 关于binary log一点总结[转]

    阅读目录(Content) 1 what's binary log 2 Binary Logging Options and Variables 2.1 基础参数 3 Binary Logging F ...

  5. 【模板】链式前向星+spfa

    洛谷传送门--分糖果 博客--链式前向星 团队中一道题,数据很大,只能用链式前向星存储,spfa求单源最短路. 可做模板. #include <cstdio> #include <q ...

  6. Named function expressions demystified

    Introduction Surprisingly, a topic of named function expressions doesn't seem to be covered well eno ...

  7. webstorm配置编译sass的输出目录

    关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很 ...

  8. Linux Bootup Time

    Linux Bootup Time 英文原文地址:http://elinux.org/Boot_Time 1.   简介 启动时间这一话题包括很多子话题,比如启动时间的衡量.启动时间的分析.人为因素分 ...

  9. Java中this关键字的作用

    转载: 原文地址:http://www.cnblogs.com/lzq198754/p/5767024.html 一.this关键字主要有三个应用: (1)this调用本类中的属性,也就是类中的成员变 ...

  10. 重启mysql提示:The server quit without updating PID file问题的解决办法

    今天因为需要开启事件调度器event_scheduler,所以修改了mysql的配置文件/etc/my.cnf 就因为配置多了个分号,导致一直启动失败,如下图所示: 然后去网上搜了帖子(MySQL提示 ...