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