移動端事件
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屬性
