1866
1866
  • 发布:2016-03-17 15:15
  • 更新:2016-03-17 18:33
  • 阅读:2627

tap点击事件pc上有反应,手机上没反应

分类:MUI
tap

<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>

document.getElementById('info').addEventListener('tap', function() {

if (!mui.os.plus) {
mui.openWindow({
url: "info.html",
id: "info",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
return;
}

});

2016-03-17 15:15 负责人:无 分享
已邀请:
1866

1866 (作者)

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
	<meta name="apple-mobile-web-app-capable" content="yes">  
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
      
</head>  
<body>  
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">  
		<!--侧滑菜单部分-->  
		<aside id="offCanvasSide" class="mui-off-canvas-left">  
			<div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
				<div class="mui-scroll">  
					<h1>World</h1>  
				</div>  
			</div>  
		</aside>  
		<!--主体部分-->  
		<div class="mui-inner-wrap">		  
			<header class="mui-bar mui-bar-nav">  
				<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>  
				<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>  
				<h1 class="mui-title">刺客信条</h1>  
			</header>  
			<div class="mui-off-canvas-backdrop"></div>  
			<!--图片轮番-->  
			<div class="mui-slider" style="top: 40px;">  
			  <div class="mui-slider-group mui-slider-loop">  
			    <!--支持循环,需要重复图片节点-->  
			    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4-4.jpg" /></a></div>  
			    <div class="mui-slider-item"><a href="#"><img src="img/4-1.jpg" /></a></div>  
			    <div class="mui-slider-item"><a href="#"><img src="img/4-2.jpg" /></a></div>  
			    <div class="mui-slider-item"><a href="#"><img src="img/4-3.jpg" /></a></div>  
			    <div class="mui-slider-item"><a href="#"><img src="img/4-4.jpg" /></a></div>  
			    <!--支持循环,需要重复图片节点-->  
			    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4-1.jpg" /></a></div>  
			  </div>  
			  <div class="mui-slider-indicator">  
				<div class="mui-indicator mui-active"></div>  
				<div class="mui-indicator"></div>  
				<div class="mui-indicator"></div>  
				<div class="mui-indicator"></div>  
			  </div>  
			</div>  
		</div>  
	</div>  
</body>  
<script>  
	mui.init();  
	//侧滑容器父节点  
	var offCanvasWrapper = mui('#offCanvasWrapper');  
	 //主界面容器  
	var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');  
	 //菜单容器  
	var offCanvasSide = document.getElementById("offCanvasSide");  
	  
  
	//主界面和侧滑菜单界面均支持区域滚动;  
	mui('#offCanvasSideScroll').scroll();  
	mui('#offCanvasContentScroll').scroll();  
	 //实现ios平台原生侧滑关闭页面;  
	if (mui.os.plus && mui.os.ios) {  
		mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能  
			plus.webview.currentWebview().setStyle({  
				'popGesture': 'none'  
			});  
		});  
	}  
	  
	//图片轮番  
	var gallery = mui('.mui-slider');  
	gallery.slider({  
	  interval:5000//自动轮播周期,若为0则不自动播放,默认为0;  
	});  
	  
	//处理右上角关于图标的点击事件;  
	var subWebview = null,  
		template = null;  
	document.getElementById('info').addEventListener('tap', function() {  
		if (!mui.os.plus) {  
			mui.openWindow({  
				url: "info.html",  
				id: "info",  
				show: {  
					aniShow: 'zoom-fade-out',  
					duration: 300  
				}  
			});  
			return;  
		}  
		if (subWebview == null) {  
			//获取共用父窗体  
			template = plus.webview.getWebviewById("default-main");  
		}  
		if (template) {  
			subWebview = template.children()[0];  
			subWebview.loadURL('info.html');  
			//修改共用父模板的标题  
			mui.fire(template, 'updateHeader', {  
				title: '关于',  
				showMenu: false  
			});  
			template.show('slide-in-right', 150);  
		}  
		//				mui.openWindow({  
		//					url:"examples/info.html",  
		//					id:"info",  
		//					show:{  
		//						aniShow:'zoom-fade-out',  
		//						duration:300  
		//					}  
		//				});  
	});  
	  
	  
	  
</script>  
</html>
DCloud_UNI_FXY

DCloud_UNI_FXY

测试没有问题,不是事件的问题,是你在plus下打开窗口的代码有问题

  • 1866 (作者)

    我把条件改成!(mui.os.plus && mui.os.ios) 可以使用了,


    2016-03-17 18:49

DCloud_UNI_FXY

DCloud_UNI_FXY

发个测试工程

  • 1866 (作者)

    项目在下面呢,帮看看


    2016-03-17 17:43

菜鸟先飞

菜鸟先飞

这个需要在plusReady 后再执行才会起作用

该问题目前已经被锁定, 无法添加新回复