移动端事件
1、querySelect系列的坑
他是一个静态dom元素，当dom没发生改变的时候它有用，一旦发生改变他就失效，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>querySelect测试</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var divs = document.querySelectorAll("div")
document.body.innerHTML += "<a></a>"
for (let i=0;i<divs.length;i++) {
divs[i].style.backgroundColor = "pink"
}
console.log(divs)
</script>
</body>
</html>
2、移动端基础事件
1、触屏事件：
touchstart
touchmove
touchend
2.1 阻止手机默认事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>阻止手机默认事件</title>
<style>
div {
background-color: pink;
width: 300px;
height: 300px;
}
</style>>
</head>
<body>
<div>复制文字测试</div>
<a href="http://www.baidu.com">a链接测试</a>
<script>
document.addEventListener('touchstart',function(ev) {
ev = ev || event
ev.preventDefault()
},{ passive: false })
</script>
</body>
</html>
2.2 事件点透
问题描述：一个定位盒子包裹着别的内容，点击盒子消失，同时也会触发盒子底下内容的事件，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>点透事件</title>
<style>
div {
background-color: pink;
width: 300px;
height: 300px;
position: absolute;
opacity: 0.5;
}
</style>
</head>
<body>
<div></div>
<a href="http://www.baidu.com">a链接测试</a>
<script>
let div = document.getElementsByTagName('div')[0]
div.addEventListener('touchstart',function(ev) {
this.style.display = "none"
})
</script>
</body>
</html>
出现的原因：touch事件是无延迟的
解决办法：阻止手机默认行为
2.3 防止事件误触
问题描述：
1、当手再滑动的时候，应该算作是误触，不能让a标签跳转
2、当手点击抬起的时候，算是点击
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>自定义a事件</title>
</head>
<body>
<a href="http://www.baidu.com">a链接测试</a>
<a href="http://www.baidu.com">a链接测试</a>
<a href="http://www.baidu.com">a链接测试</a>
<a href="http://www.baidu.com">a链接测试</a>
<script>
// 阻止事件的默认行为
document.addEventListener('touchstart',function(ev) {
ev = ev || event
ev.preventDefault()
},{ passive: false })
// a链接防止误触
let alinks = document.getElementsByTagName("a")
for(let i = 0;i<alinks.length;i++) {
alinks[i].addEventListener('touchstart',function(ev) {
this.ismove = false
})
alinks[i].addEventListener('touchmove',function(ev) {
this.ismove = true
})
alinks[i].addEventListener('touchend',function(ev) {
if(!this.ismove){
location.href = this.href
}
})
}
</script>
</body>
</html>
2.4 手指事件中的几个重要参数
1、changedTouches（list）：当点击屏幕的手指发生改变的时候，他就会得到改变的这个手指信息
2、targetTouches（list）：手指在的这个目标位置
3、touches（list）：整个屏幕上存在的手指，按点击顺序排列
2.5 多指事件
// 只需要判断手指个数就可以实现多指事件，核心还是touch事件
document.addEventListener('touchmove',function(ev) {
if(ev.touches.length >=2) {
}
})
2.6 手机摇一摇（重力感应）
| 属性 |
释意 |
| event.accelaration |
x(y,z):设备在x(y,z)方向上的移动加速度值 |
| event.accelerationIncludingGravity |
x(y,z):考虑了重力加速度后设备在x(y,z)方向上的移动加速度值 |
| event.rotationRate |
设备绕x,y,z轴旋转的角度 |
var shakeThreshold = 1000; // 定义一个摇动的阈值
var lastUpdate = 0; // 记录上一次摇动的时间
var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据
// 监听传感器运动事件
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler,false);
} else {
//浏览器不支持DeviceMotion
alert('天呐，你的手机竟然还不支持摇一摇ヾ(◍°∇°◍)ﾉﾞ');
}
// 运动传感器处理
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
var curTime = new Date().getTime();
// 100毫秒进行一次位置判断
if ((curTime - lastUpdate) > 100) {
var diffTime = curTime - lastUpdate;
lastUpdate = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
if (speed > shakeThreshold) {
alert("摇一摇触发")
}
lastX = x;
lastY = y;
lastZ = z;
}
}
2.7 其他常见问题
2.7.1、禁止电话拨号和邮箱弹框
<meta name="format-detection" content="telephone=no,email=no">
<a href="tel:110">110</a>
<a href="mailto:2424028621@qq.com">2424028621@qq.com</a>
2.7.2、解决链接高亮问题和按钮一直圆角问题
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input {
-webkit-appearance: none;
}
2.7.3、font Boosting问题
问题描述：字体不按照给的样式显示，而是浏览器帮我们放大字体
解决办法：添加max-hight属性
