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