mui 事件管理及自定义事件详解
Posted zc290987034
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui 事件管理及自定义事件详解相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> /*提前预加载其他页面，这样再打开已加载好的页面就会有很好的效果了*/ mui.init(); </script> </head> <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">hello</h1> </header> <div class="mui-content"> <button type="button" onclick="mshow()">测试onclick</button> <button type="button" id="btn1">测试id 点击事件</button> <br /> <ul id="lists" class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell">Item 2</li> <li class="mui-table-view-cell">Item 3</li> </ul> <br /> <button type="button" id="btn2">点击这里</button> <br> <ul class="mui-table-view" id="list1"> <li class="mui-table-view-cell" id="1">新闻 1</li> <li class="mui-table-view-cell" id="2">新闻 2</li> <li class="mui-table-view-cell" id="3">新闻 3</li> </ul> </div> </body> <script type="text/javascript"> /*用此方法的话，万一页面没有加载完，用户就点击了某个按钮就怕出问题*/ function mshow(){ mui.toast(‘ok‘); } /*plusReady() 此mui方法值能在真机上运行，用此方法的目的是能证明加载完所有的控件了*/ mui.plusReady(function(){}); document.getElementById(‘btn1‘).addEventListener(‘tap‘,function(){ mui.toast(‘ok‘); }) mui(‘#lists‘).on(‘tap‘,‘li‘,function(){ mui.toast(this.innerHTML); //mui(‘#lists‘).off(‘tap‘,‘li‘);//取消点击事件 }) document.getElementById(‘btn2‘).addEventListener(‘tap‘,function(){ mui.toast(‘ok‘); }) //点击跳转并传值 //mui.plusReady(function(){}); var detailPage = mui.preload({url:‘sub.html‘,id:‘sub.html‘}); mui(‘#list1‘).on(‘tap‘, ‘li‘, function(e){ mui.fire(detailPage,‘newsId‘,{‘title‘: this.innerHTML, ‘id‘:this.getAttribute(‘id‘)}); mui.openWindow({url: ‘sub.html‘,id:‘sub.html‘}); }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); //接受数据 只能在真机运行下才能有效果 //mui.plusReady(function(){}); window.addEventListener(‘newsId‘,function(e){ var title1 = mui(‘#title‘); title1[0].innerHTML = e.detail.title; mui.toast(e.detail.id); console.log(‘bb‘); }); console.log(‘aa‘); </script> </head> <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" id="title">hello</h1> </header> </body> </html>
以上是关于mui 事件管理及自定义事件详解的主要内容，如果未能解决你的问题，请参考以下文章