-------------移動端事件 touch事件----------------
touchstart--觸摸開始觸發(fā)撒汉，touchmove--觸摸移動觸發(fā) 沟优、touchend--觸摸結(jié)束觸發(fā)
------------touch事件的event對象-----------------
1.屬性：? ??changedTouches 常用
touches--捕獲所有的觸摸點
targetTouches--捕獲目標(biāo)元素上的觸摸點
----------changedTouches-------捕獲發(fā)生變化的觸摸點；常用
一般都是一根手指睬辐，所以獲取第一個的數(shù)據(jù)挠阁，e.changedTouches[0]
當(dāng)touchend觸摸離開事件時，手指離開了屏幕溯饵，touches侵俗，targetTouches無法捕捉到觸摸點，只有changedTouches能捕捉到丰刊；
2.changedTouches? ?獲取坐標(biāo)的屬性? ? ? ?pageX pageY常用
clientX clientY-----是相對可視區(qū)的距離
pageX pageY------是相對頁面起點的距離隘谣，更精準(zhǔn)常用
------------單指拖拽--運動--------------
transform ：translate3d(x,y,z)--位移，z軸一般為0啄巧，比單獨使用translateX/Y更高效（因為開啟了GPU加速）
通過不斷給X寻歧，Y 賦值，來實現(xiàn)點擊位移秩仆；
-------------其他觸摸事件--高級事件-----------------
touch事件支持原生格式码泛，其他高級事件需要通過touch事件封裝才行，比如touchstart按下超過XX毫秒澄耍，還沒有觸發(fā)touchend結(jié)束事件噪珊，就認(rèn)定為這個是長按事件；逾苫；卿城；最推薦的是，可以通過引入hammer.js來自己使用高級事件（人家封裝好的）
1铅搓、拖動
Pan事件：（可以理解為對touch的封裝）一個手指按下并移動事件瑟押，即觸屏中的拖動事件。這個事件在屏觸開發(fā)中比較常用星掰，如：左拖動多望、右拖動等，如手要上使用QQ時向右滑動出現(xiàn)功能菜單的效果氢烘。該事件還可以分別對以下事件進(jìn)行監(jiān)聽并處理：
Panstart：拖動開始怀偷、Panmove：拖動過程、Panend：拖動結(jié)束播玖、Pancancel：拖動取消椎工、Panleft：向左拖動、Panright：向右拖動、Panup：向上拖動维蒙、Pandown：向下拖動
2掰吕、雙指縮放
Pinch事件：在指定的dom區(qū)域內(nèi)，兩個手指（默認(rèn)為兩個手指颅痊，多指觸控需要單獨設(shè)置）或多個手指相對（越來越近）移動或相向（越來越遠(yuǎn)）移動時事件殖熟。該事件事以分別對以下事件進(jìn)行監(jiān)聽并處理：
Pinchstart：多點觸控開始、Pinchmove：多點觸控過程斑响、Pinchend：多點觸控結(jié)束菱属、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離越來越近舰罚、Pinchout：多點觸控時兩手指距離越來越遠(yuǎn)
3纽门、按壓
Press事件：按壓事件，?點擊后最小按壓時間為500毫秒营罢，并不包含任何移動膜毁，常用于我們在手機上用的“復(fù)制、粘貼”等功能愤钾。該事件分別對以下事件進(jìn)行監(jiān)聽并處理：
Pressup：點擊事件離開時觸發(fā)
4、雙指旋轉(zhuǎn)
Rotate事件：在指定的dom區(qū)域內(nèi)候醒，當(dāng)兩個手指或更多手指成圓型旋轉(zhuǎn)時觸發(fā)（就像兩個手指擰螺絲一樣）能颁。該事件分別對以下事件進(jìn)行監(jiān)聽并處理：
Rotatestart：旋轉(zhuǎn)開始、Rotatemove：旋轉(zhuǎn)過程倒淫、Rotateend：旋轉(zhuǎn)結(jié)束伙菊、Rotatecancel：旋轉(zhuǎn)取消
5、滑動
Swipe事件：在指定的dom區(qū)域內(nèi)敌土，一個手指快速的在觸屏上滑動镜硕。即我們平時用到最多的滑動事件。
Swipeleft：向左滑動返干、Swiperight：向右滑動兴枯、Swipeup：向上滑動、Swipedown：向下滑動
6矩欠、輕點擊
Tap事件：在指定的dom區(qū)域內(nèi)财剖，一個手指輕拍或點擊時觸發(fā)該事件(類似PC端的click)。該事件最大點擊時間為250毫秒癌淮，如果超過250毫秒則按Press事件進(jìn)行處理躺坟。
------------兼容性查詢網(wǎng)站can i use.com----------?
輸入要查詢的標(biāo)簽，可以查詢?yōu)g覽器兼容性?
H5瀏覽器兼容性?
主要是header乳蓄、footer標(biāo)簽兼容性解決：引入html5shiv.min.js來兼容咪橙，下載地址如圖：<script src="html5shiv.min.js"></script>JS瀏覽器兼容性使用特性檢測【如圖使用短路運算符判斷是否存在，最標(biāo)準(zhǔn)的寫法要寫在最前面】--- 處理瀏覽器兼容性
js-瀏覽器兼容性
使用特性檢測【如圖使用短路運算符判斷是否存在，最標(biāo)準(zhǔn)的寫法要寫在最前面】--- 處理瀏覽器兼容性
CSS瀏覽器兼容性
以彈性布局為例美侦，插入下載的js文件产舞，按需選擇，然后分別給支持和不支持的瀏覽器設(shè)置樣式
（需要在modernizr官網(wǎng)選擇flex音榜，下載文件引入后庞瘸， 才會有flexbox和no-flexbox這兩個類名）
--------------------移動端動畫-------------------
優(yōu)先使用順序
css3(transition>annimation)>js（requestAnimationFrame）；
移動端js動畫--requestAnimationFrame調(diào)用一次只執(zhí)行一幀赠叼，做完遞歸后再請求下一幀--直到抵達(dá)目的地
---------------click300ms延遲--------------
click300ms延遲--雙擊造成
1擦囊、部分瀏覽器加上width=device-width就能解決
2、
1）引入fastclick.js---下載地址如圖：
原理：使用模擬的事件取代click300ms延遲
2）在script標(biāo)簽中寫
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
----------------------水平居中垂直居中---------------------
一般使用彈性布局都可以解決嘴办，優(yōu)先使用瞬场，不過也需要掌握更多的方法，面試有可能會問
（1） 行內(nèi)元素
文字居中的方法：行內(nèi)元素不能設(shè)置寬高涧郊，由內(nèi)容撐開贯被，本身就是垂直居中的，然后直接設(shè)置左右內(nèi)邊距撐開妆艘，就達(dá)到了水平居中效果彤灶；
容器居中的方法：加絕對定位，left和top設(shè)置50%批旺，但因為是從容器左上角計算幌陕，所以實際還需要減去容器的一半寬高，但是行內(nèi)元素是由內(nèi)容撐開的汽煮，不知道寬高是多少搏熄，此時可以使用transform2d移動translate(-50%,-50%)，可以自動計算出容器的寬高（即使有指定寬高也可以使用這個方法自動計算）
（2）行內(nèi)塊元素
文字居中的方法：1暇赤、沒有設(shè)置寬高：直接設(shè)置內(nèi)邊距撐開即可（塊元素可以設(shè)置上邊距心例，行內(nèi)元素不行）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2、設(shè)置了寬高：? ?直接text-align：center 和 line-height鞋囊，如果有多行文字就需要使用彈性布局了
容器居中的方法：1止后、沒有設(shè)置寬高：與行內(nèi)元素的方法一樣，絕對定位溜腐，然后利用2d移動自動計算容器寬高移動到對應(yīng)位置
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2坯门、設(shè)置了寬高? ?：絕對定位各50%，然后margin對應(yīng)方向 負(fù)寬度和高度的一半
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
（3）塊級元素
文字居中的方法：因為塊級元素默認(rèn)是占寬度的100%逗扒，所以直接設(shè)置text-align：center就可以實現(xiàn)水平居中古戴；垂直居中則設(shè)置上下內(nèi)邊距撐開；
容器居中的方法：1矩肩、沒有設(shè)置寬高：同樣使用絕對定位现恼，2d移動到對應(yīng)位置即可
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2肃续、設(shè)置了寬高? ? ：水平居中可以用margin：0 auto；水平垂直居中同樣絕對定位叉袍，然后margin負(fù)掉寬高的一半
