• 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;
    				 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:触发当前事件时屏幕上的手指列表

  • 相关阅读:
    Java输出错误信息与调试信息
    Java实现两个变量的互换(不借助第3个变量)
    Java用三元运算符判断奇数和偶数
    使用webpack-dev-server设置反向代理解决前端跨域问题
    springboot解决跨域问题(Cors)
    Spring boot集成swagger2
    Redis学习汇总
    【年终总结】2017年迟来的总结
    Springboot项目maven多模块拆分
    Maven实现多环境打包
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/9904310.html
Copyright © 2020-2023  润新知