移动端事件
1、querySelect系列的坑
他是一个静态dom元素，当dom没发生改变的时候它有用，一旦发生改变他就失效，例如：
querySelect测试
2、移动端基础事件
1、触屏事件：
touchstart
touchmove
touchend
2.1 阻止手机默认事件
阻止手机默认事件
>
复制文字测试
a链接测试
2.2 事件点透
问题描述：一个定位盒子包裹着别的内容，点击盒子消失，同时也会触发盒子底下内容的事件，代码如下
点透事件
a链接测试
出现的原因：touch事件是无延迟的
解决办法：阻止手机默认行为
2.3 防止事件误触
问题描述：
1、当手再滑动的时候，应该算作是误触，不能让a标签跳转
2、当手点击抬起的时候，算是点击
自定义a事件
a链接测试
a链接测试
a链接测试
a链接测试
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、禁止电话拨号和邮箱弹框
110
2424028621@qq.com
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属性