forrestxing
forrestxing
  • 发布:2015-11-19 16:04
  • 更新:2015-11-19 17:43
  • 阅读:2552

为标签a添加tap事件跳转到新的页面为什么会跳转2次了,请各位帮忙解决下奥!

分类:MUI

<a id="a_search" href="#" class="mui-icon mui-icon-search mui-pull-right"></a>

document.getElementById("a_search").addEventListener("tap",function(){
openNewPage("search.html",{},"slide-in-right");
});

点击跳转的事件页面出现了2次。。。。

2015-11-19 16:04 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

贴出来页面完整代码。

forrestxing

forrestxing (作者)

home.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" />  
		<link href="../css/font_size.css" rel="stylesheet" />  
		<link href="../css/iconfont.css" rel="stylesheet" />  
		<style type="text/css">  
			/*.mui-preview-image.mui-fullscreen {  
				position: fixed;  
				z-index: 20;  
				background-color: #000;  
			}*/  
			  
			/*.mui-preview-header,  
			.mui-preview-footer {  
				position: absolute;  
				width: 100%;  
				left: 0;  
				z-index: 10;  
			}*/  
			  
			/*.mui-preview-header {  
				height: 44px;  
				top: 0;  
			}*/  
			  
			/*.mui-preview-footer {  
				height: 50px;  
				bottom: 0px;  
			}*/  
			  
			/*.mui-preview-header .mui-preview-indicator {  
				display: block;  
				line-height: 25px;  
				color: #fff;  
				text-align: center;  
				margin: 15px auto 4;  
				width: 70px;  
				background-color: rgba(0, 0, 0, 0.4);  
				border-radius: 12px;  
				font-size: 16px;  
			}*/  
			  
			/*.mui-preview-image {  
				display: none;  
				-webkit-animation-duration: 0.5s;  
				animation-duration: 0.5s;  
				-webkit-animation-fill-mode: both;  
				animation-fill-mode: both;  
			}*/  
			  
			/*.mui-preview-image.mui-preview-in {  
				-webkit-animation-name: fadeIn;  
				animation-name: fadeIn;  
			}*/  
			  
			/*.mui-preview-image.mui-preview-out {  
				background: none;  
				-webkit-animation-name: fadeOut;  
				animation-name: fadeOut;  
			}*/  
			  
			/*.mui-preview-image.mui-preview-out .mui-preview-header,  
			.mui-preview-image.mui-preview-out .mui-preview-footer {  
				display: none;  
			}*/  
			  
			.mui-zoom-scroller {  
				position: absolute;  
				display: -webkit-box;  
				display: -webkit-flex;  
				display: flex;  
				-webkit-box-align: center;  
				-webkit-align-items: center;  
				align-items: center;  
				-webkit-box-pack: center;  
				-webkit-justify-content: center;  
				justify-content: center;  
				left: 0;  
				right: 0;  
				bottom: 0;  
				top: 0;  
				width: 100%;  
				height: 100%;  
				margin: 0;  
				-webkit-backface-visibility: hidden;  
			}  
			  
			.mui-zoom {  
				-webkit-transform-style: preserve-3d;  
				transform-style: preserve-3d;  
			}  
			  
			.mui-slider .mui-slider-group .mui-slider-item img {  
				width: auto;  
				height: auto;  
				max-width: 100%;  
				max-height: 100%;  
			}  
			  
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {  
				width: 100%;  
			}  
			  
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {  
				display: inline-table;  
			}  
			  
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {  
				display: table-cell;  
				vertical-align: middle;  
			}  
			  
			.mui-preview-loading {  
				position: absolute;  
				width: 100%;  
				height: 100%;  
				top: 0;  
				left: 0;  
				display: none;  
			}  
			  
			.mui-preview-loading.mui-active {  
				display: block;  
			}  
			  
			.mui-preview-loading .mui-spinner-white {  
				position: absolute;  
				top: 50%;  
				left: 50%;  
				margin-left: -25px;  
				margin-top: -25px;  
				height: 50px;  
				width: 50px;  
			}  
			  
			.mui-preview-image img.mui-transitioning {  
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;  
				transition: transform 0.5s ease, opacity 0.5s ease;  
			}  
			  
			@-webkit-keyframes fadeIn {  
				0% {  
					opacity: 0;  
				}  
				100% {  
					opacity: 1;  
				}  
			}  
			  
			@keyframes fadeIn {  
				0% {  
					opacity: 0;  
				}  
				100% {  
					opacity: 1;  
				}  
			}  
			  
			@-webkit-keyframes fadeOut {  
				0% {  
					opacity: 1;  
				}  
				100% {  
					opacity: 0;  
				}  
			}  
			  
			@keyframes fadeOut {  
				0% {  
					opacity: 1;  
				}  
				100% {  
					opacity: 0;  
				}  
			}  
			  
			p img {  
				max-width: 100%;  
				height: auto;  
			}  
		</style>  
	</head>  
  
	<body>  
		<header class="mui-bar mui-bar-nav">  
			<a class="mui-icon iconfont icon-liwu mui-pull-left"></a>  
			<h2 id="title" class="mui-title">我有礼</h2>  
			<a  href="#" class="mui-icon mui-icon-search mui-pull-right"></a>  
		</header>  
  
		<div class="mui-content">  
					<div id="slider" class="mui-slider">  
			<div class="mui-slider-group mui-slider-loop">  
				<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->  
				<div class="mui-slider-item mui-slider-item-duplicate">  
					<a href="#">  
						<img src="../images/yuantiao.jpg">  
					</a>  
				</div>  
				<!-- 第一张 -->  
				<div class="mui-slider-item">  
					<a href="#">  
						<img src="../images/shuijiao.jpg">  
					</a>  
				</div>  
				<!-- 第二张 -->  
				<div class="mui-slider-item">  
					<a href="#">  
						<img src="../images/muwu.jpg">  
					</a>  
				</div>  
				<!-- 第三张 -->  
				<div class="mui-slider-item">  
					<a href="#">  
						<img src="../images/cbd.jpg">  
					</a>  
				</div>  
				<!-- 第四张 -->  
				<div class="mui-slider-item">  
					<a href="#">  
						<img src="../images/yuantiao.jpg">  
					</a>  
				</div>  
				<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->  
				<div class="mui-slider-item mui-slider-item-duplicate">  
					<a href="#">  
						<img src="../images/shuijiao.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>  
			<ul class="mui-table-view">  
				<li class="mui-table-view-divider">  
					<a class="mui-navigate-right">  
						送礼专题  
					</a>  
				</li>  
			</ul>  
			<p>  
				<img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="1" />  
			</p>  
			<p>  
				<img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" />  
			</p>  
			<p>  
				<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />  
			</p>  
			<ul class="mui-table-view">  
				<li class="mui-table-view-divider">  
					<a class="mui-navigate-right">  
						精选礼物  
					</a>  
				</li>  
			</ul>  
			<p>  
				<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />  
			</p>  
			<div class="mui-media-body">  
				<div style="width: 100%;">  
					<table style="width: 100%;">  
						<tr style="width: 100%;">  
							<td align="left">  
								<h4>双十一特惠</h4>  
							</td>  
							<td align="right">  
								<a class="mui-icon mui-icon-star mui-pull-right"></a>  
							</td>  
						</tr>  
					</table>  
				</div>  
				<p class='mui-ellipsis'>原价:200|国际儿童会所 徐汇店</p>  
				<div style="width: 100%;">  
					<table style="width: 100%;">  
						<tr style="width: 100%;">  
							<td align="left">  
								<span class="font_size">RMB 100</span>  
							</td>  
							<td align="right">  
								<div class="mui-btn mui-btn-primary" style="background-color: #000000;">  
									独家  
								</div>  
								<button type="button" class="mui-btn mui-btn-warning">  
									体验类  
								</button>  
							</td>  
						</tr>  
					</table>  
				</div>  
			</div>  
			<p style="margin-top:5px;">  
				<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />  
			</p>  
			<div class="mui-media-body">  
				<div style="width: 100%;">  
					<table style="width: 100%;">  
						<tr style="width: 100%;">  
							<td align="left">  
								<h4>双十一特惠</h4>  
							</td>  
							<td align="right">  
								<a class="mui-icon mui-icon-star mui-pull-right"></a>  
							</td>  
						</tr>  
					</table>  
				</div>  
				<p class='mui-ellipsis'>原价:200|国际儿童会所 徐汇店</p>  
				<div style="width: 100%;">  
					<table style="width: 100%;">  
						<tr style="width: 100%;">  
							<td align="left">  
								<span class="font_size">RMB 100</span>  
							</td>  
							<td align="right">  
								<div class="mui-btn mui-btn-primary" style="background-color: #000000;">  
									独家  
								</div>  
								<button type="button" class="mui-btn mui-btn-warning">  
									体验类  
								</button>  
							</td>  
						</tr>  
					</table>  
				</div>  
			</div>  
			<p style="margin-top:5px;">  
				<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />  
			</p>  
			<div class="mui-media-body">  
				<div style="width: 100%;">  
					<table style="width: 100%;">  
						<tr style="width: 100%;">  
							<td align="left">  
								<h4>双十一特惠</h4>  
							</td>  
							<td align="right">  
								<a class="mui-icon mui-icon-star mui-pull-right"></a>  
							</td>  
						</tr>  
					</table>  
				</div>  
				<p class='mui-ellipsis'>原价:200|国际儿童会所 徐汇店</p>  
				<div style="width: 100%;">  
					<table style="width: 100%;">  
						<tr style="width: 100%;">  
							<td align="left">  
								<span class="font_size">RMB 100</span>  
							</td>  
							<td align="right">  
								<div class="mui-btn mui-btn-primary" style="background-color: #000000;">  
									独家  
								</div>  
								<button type="button" class="mui-btn mui-btn-warning">  
									体验类  
								</button>  
							</td>  
						</tr>  
					</table>  
				</div>  
			</div>  
		</div>  
	</body>  
	<script src="../js/mui.min.js"></script>  
	<script src="../js/common.js"></script>  
	<script src="../js/mui.zoom.js"></script>  
	<script src="../js/mui.previewimage.js"></script>  
	<script>  
		mui.init();  
		mui.plusReady(function() {});  
		document.getElementById("a_search").addEventListener("tap",function(){  
			//alert(12);  
			openNewPage("search.html",{},"slide-in-right");  
		});  
	</script>  
  
</html>  
  
  
  
search.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" />  
		<link href="../css/font_size.css" rel="stylesheet" />  
		<link href="../css/iconfont.css" rel="stylesheet" />  
	</head>  
  
	<body>  
		<header class="mui-bar mui-bar-nav">  
			<table style="width: 100%;">  
				<tr>  
					<td style="width: 10%;">  
						<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>  
					</td>  
					<td style="width: 90%;">  
						<div class="mui-input-row mui-search">  
							<input type="search" class="mui-input-clear" placeholder="送礼物">  
						</div>  
					</td>  
				</tr>  
			</table>  
		</header>  
		<div class="mui-content">  
			<div style="border-bottom: 1px solid gray; padding: 5px;">  
				<table style="height: 15px;">  
					<tr>  
						<td style="width:3px; background-color: orange;">  
						</td>  
						<td style="width: 100%;">  
							<span>热门搜索</span>  
						</td>  
					</tr>  
				</table>  
				<ul class="mui-table-view mui-grid-view mui-grid-9">  
		              
		            <li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
							<button type="button" class="mui-btn">  
								生蚝  
							</button>  
							<button type="button" class="mui-btn">  
								衣服  
							</button>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
						</div>  
					</li>  
		        </ul>   
			</div>  
			<div style="margin-top: 0px; padding: 5px;">  
				<table style="height: 15px;">  
					<tr>  
						<td style="width:3px; background-color: orange;">  
						</td>  
						<td style="width: 100%;">  
							<span>筛选赠送对象</span>  
						</td>  
					</tr>  
				</table>  
				<ul class="mui-table-view">  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
							<button type="button" class="mui-btn">  
								生蚝  
							</button>  
							<button type="button" class="mui-btn">  
								衣服  
							</button>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
						</div>  
					</li>  
				</ul>  
				<table style="height: 15px;">  
					<tr>  
						<td style="width:3px; background-color: orange;">  
						</td>  
						<td style="width: 100%;">  
							<span>筛选场合or理由</span>  
						</td>  
					</tr>  
				</table>  
				<ul class="mui-table-view">  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
							<button type="button" class="mui-btn">  
								生蚝  
							</button>  
							<button type="button" class="mui-btn">  
								衣服  
							</button>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
						</div>  
					</li>  
				</ul>  
				<table style="height: 15px;">  
					<tr>  
						<td style="width:3px; background-color: orange;">  
						</td>  
						<td style="width: 100%;">  
							<span>筛选TA喜欢的</span>  
						</td>  
					</tr>  
				</table>  
				<ul class="mui-table-view">  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
							<button type="button" class="mui-btn">  
								生蚝  
							</button>  
							<button type="button" class="mui-btn">  
								衣服  
							</button>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								鲜花  
							</button>  
							<button type="button" class="mui-btn">  
								巧克力  
							</button>  
							<button type="button" class="mui-btn">  
								蛋糕  
							</button>  
							<button type="button" class="mui-btn">  
								生蚝  
							</button>  
							<button type="button" class="mui-btn">  
								衣服  
							</button>  
						</div>  
					</li>  
				</ul>  
				<table style="height: 15px;">  
					<tr>  
						<td style="width:3px; background-color: orange;">  
						</td>  
						<td style="width: 100%;">  
							<span>筛选预算</span>  
						</td>  
					</tr>  
				</table>  
				<ul class="mui-table-view">  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								全部  
							</button>  
							<button type="button" class="mui-btn">  
								¥0~149  
							</button>  
							<button type="button" class="mui-btn">  
								¥150~299  
							</button>  
							<button type="button" class="mui-btn">  
								¥300~499  
							</button>  
							  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div style="width: 100%;">  
							<button type="button" class="mui-btn">  
								¥500~999  
							</button>  
							<button type="button" class="mui-btn">  
								¥1000~1999  
							</button>  
							<button type="button" class="mui-btn">  
								¥2000+  
							</button>  
							  
						</div>  
					</li>  
				</ul>  
			</div>  
		</div>  
	</body>  
	<script>  
		mui.init();  
		//mui.previewImage();  
	</script>  
  
</html>
DCloud_UNI_FXY

DCloud_UNI_FXY

你引用了两个mui.min.js

forrestxing

forrestxing (作者)

奥奥,果然是,好的,非常感谢了!

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