移動端事件基礎

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