移動端事件基礎
queryselector的坑
- queryselectorAll：靜態列表
- queryselector：靜態列表的第一個
移動端事件
移動端事件：觸屏事件、指針時間（用的少）
移動端: touchstart touchmove(不可能單獨觸發) touchend
pc端： mousedown mousemove(可以單獨觸發) mouseup
阻止事件的默認行爲，阻止事件的冒泡
ev.preventDefault(); ev.stopPropagation();
阻止事件的默認行爲可以查看 event.cancelable 屬性來判斷一個事件
的默認動作是否可以被取消.
cancelable屬性爲true的事件上調用 preventDefault才生效
怎麼全局阻止默認事件
隱患：頁面所有滾動條失效
解決：自定義系統滾動條
document.addEventListener("touchstart",function(ev){
ev=ev||event;
ev.preventDefault();
// 注：在pc端測試會報錯，但在真機上是正常的
})
事件點透
1.pc端的事件可以在移動端觸發
2.PC端事件有300毫秒延遲
3.移動端事件不會有延遲
主要表現：
覆蓋層下的超鏈接會被觸發；
跳轉後相同位置元素會被點擊
解決辦法：
1.不要混用touch和click
2.全局阻止默認事件+移動端跳轉方案
event 3類手指列表
changedTouches:觸發當前事件的手指列表
targetTouches:觸發當前事件時元素上的手指列表
touches:觸發當前事件時屏幕上的手指列表
移動端常見問題
-webkit-appearance:none //解決圓角按鈕過圓
font boosting //max-height: 999999px;
禁止電話與郵箱：
<meta name="format-detection"content="telephone=no,email=no"/>
需要使用時，用a標籤：
<a href="tel:110">1383838438</a>
<a href="mailto:[email protected]">1383838438</a>
取消右鍵菜單：
右鍵監聽：contextmenu
左鍵監聽：click
document.oncontextmenu=function(){
return false;
// 如果其中某個元素需要右鍵菜單，
// 可以通過阻止事件冒泡行爲來實現
/*
給元素加contextmenu監聽
ev = ev || event
ev.stopPropagation();
*/
}
移動端模板：
meta標籤
全面阻止事件默認行爲
一個適配方案
ie6常見兼容性問題：
ie6最小高度問題
ie6最小高度是19px
解決辦法：
父容器font-size設爲0，最小高度2px,默認不會小於19px