4：移动端常见问题

1：事件的点透

  产生的原因    1.pc端的事件可以在移动端触发    2.PC端事件有300毫秒延迟    3.移动端事件不会有延迟

  //我们在点击a标签的时候不会发生跳转，你点击触发的事件是div，如果时候touchstart会立即触发事件，因为PC端的事件在移动端会有延迟。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.item{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height:200px;
				background: pink;
				opacity: .5;
				display: block;
			}
			
		</style>
	</head>
	<body>
		<div class="item"></div>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			/*
				1.pc端的事件可以在移动端触发
				2.PC端事件有300毫秒延迟
				3.移动端事件不会有延迟
			*/
			var item = document.querySelector(".item");		
			var a = document.querySelector("a");		
			/*item.addEventListener("click",function(){
				console.log("click");
			})
			item.addEventListener("touchstart",function(){
				console.log("touchstart");
			})*/
			item.addEventListener("click",function(){
				//console.log("touchend");
				this.style.display="none";
			})
			a.addEventListener("click",function(){
				console.log("click");
			})
		}	
	</script>
</html>

　　2：解决移动端跳转事件（解决误触）

<!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>
	</head>
	<body>
		<a href="https://www.baidu.com/">百度一下</a>
		<a href="https://www.baidu.com/">百度一下</a>
		<a href="https://www.baidu.com/">百度一下</a>
		<script type="text/javascript">
			//解决跳转问题
			//什么时候应该跳转，手指触摸，在抬起来就跳转，手指又移动就不触发。
			window.onload = function(){
				
				//肯定不是点击就会跳转全面阻止默认行为
				document.addEventListener("touchstart",function(ev){
                         ev = ev || event;
                         return false;
				})
				var alis = document.querySelectorAll("a");
				for(var i =0 ; i<alis.length ; i++)
				{
					alis[i].addEventListener("touchstart",function(){
						this.isMoved = false;
					})
					alis[i].addEventListener("touchmove",function(ev){
						this.isMoved = true; //手指移动的时候is
					})
					
					alis[i].addEventListener("touchend",function(){
						//结束的时候进行跳转，此时手指不能再移动
						if(!this.isMoved){
							location.href = this.href;
						}
					})
					
				}
			}
		</script>
	</body>
</html>

　　3：禁止电话和邮箱（点击数字时候系统会拨打电话问题）

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="format-detection" content="telephone=no,email=no"/> //用来禁止默认点击数字拨打电话
		<title></title>
	</head>
	<body>
		<p>1383838438</p>
		<a href="tel:110">1383838438</a>//解决需要拨打的时候
		<a href="mailto:13888@qq.com">1383838438</a>
	</body>
</html>

　　

4：解决链接默认背景的问题

 -webkit-tap-highlight-color-

5：解决圆角过圆的问题

 webkit-appearance:none

                     border-radius:0

6：字体放大问题

   max-height: 999999px;

7：event对象

//changedTouches:触发当前事件的手指列表 移动端手指

//targetTouches:触发当前事件时元素上的手指列表

//touches:触发当前事件时屏幕上的手指列表

 

posted @ 2018-11-04 16:07  INSTANCE_SELF  阅读(186)  评论(0)    收藏  举报