工作中偶爾會(huì)遇到一些不常見(jiàn)的問(wèn)題，但是解決起來(lái)又極其麻煩，通常要找很多資料才能搞定，這里我總結(jié)了近段時(shí)間遇到的一些問(wèn)題，可能會(huì)對(duì)你有幫助，高手勿噴。
1.關(guān)于iPhone最下面會(huì)彈出奇怪框框的問(wèn)題
就是這個(gè)玩意，期初以為是蘋(píng)果自己做一些其它操作用的，后來(lái)才發(fā)現(xiàn)是操作鍵盤(pán)的，也就是喚起鍵盤(pán)，這個(gè)東東就會(huì)出來(lái)，檢查了下頁(yè)面，有input框雖然設(shè)置了readonly，但是在蘋(píng)果中點(diǎn)擊的時(shí)候鍵盤(pán)是沒(méi)出來(lái)，但是這個(gè)東東會(huì)出來(lái)，采用了一個(gè)粗暴的方式，直接設(shè)置disable，然后我們?cè)偃ジ淖僫nput框的背景色即可。
2.數(shù)組深拷貝的問(wèn)題
大家都知道數(shù)據(jù)是引用類(lèi)型的，所以我們?cè)谑褂弥巴ǔ?huì)對(duì)它進(jìn)行一次拷貝，不管是使用最笨的方式循環(huán)創(chuàng)建一個(gè)新數(shù)組，還是用slice方法，都可以解決基本問(wèn)題。終于在一個(gè)項(xiàng)目中，數(shù)據(jù)是數(shù)組套對(duì)象套數(shù)組，然后怎么都拷貝不好使，搜了各種方式終于發(fā)現(xiàn)一個(gè)好方法：
[].concat(JSON.parse(JSON.stringify(dataList)));
//注意：如果有匿名函數(shù)會(huì)拷貝失敗，會(huì)轉(zhuǎn)為undefined
這里先把數(shù)組對(duì)象轉(zhuǎn)成一個(gè)JSON字符串并返回，此時(shí)它已經(jīng)不是引用類(lèi)型了，當(dāng)再次解析成JavaScript對(duì)象并返回一個(gè)新的對(duì)象的時(shí)候我們已經(jīng)對(duì)原數(shù)據(jù)進(jìn)行了拷貝。
這里簡(jiǎn)單復(fù)習(xí)下JSON.stringify()這個(gè)方法，他有三個(gè)參數(shù)。
第一個(gè)就是你要轉(zhuǎn)換的值，可以是任意，但是注意幾點(diǎn)：
1.非數(shù)組類(lèi)型的對(duì)象轉(zhuǎn)化后不能保證按照原順序輸出。
2.對(duì)于undefined，函數(shù)，symbol的值在序列化中會(huì)被忽略（費(fèi)數(shù)組對(duì)象的數(shù)據(jù)），或者轉(zhuǎn)成null。
3.不可枚舉屬性會(huì)被忽略
第二個(gè)參數(shù)replacer可以是一個(gè)函數(shù)也可以是一個(gè)數(shù)組
如果是一個(gè)數(shù)組，這只有數(shù)組中包含的屬性名才會(huì)被序列化出來(lái)（起到一個(gè)過(guò)濾的作用）
如果是函數(shù)，我們可以在序列化過(guò)程中對(duì)每一個(gè)屬性進(jìn)行操作并返回（仿佛數(shù)組的map方法）。
第三個(gè)參數(shù)用于指定縮進(jìn)用的空白字符串，如果是數(shù)字則表示幾個(gè)空格，最大為10，如果是字符串，則取前十個(gè)字母代替空格。
3.使用addEventListener綁定touch相關(guān)事件
由于使用的內(nèi)部框架，最近在調(diào)試移動(dòng)短的時(shí)候發(fā)現(xiàn)，沒(méi)法拖動(dòng)滾動(dòng)條了，每次只能拖一點(diǎn)點(diǎn)，很費(fèi)勁，瀏覽器報(bào)一堆警告，一開(kāi)始也沒(méi)時(shí)間研究，就湊合著做完在手機(jī)上調(diào)試下，倒也還好，不過(guò)問(wèn)題還是要解決的，查了一些資料才發(fā)現(xiàn)是因?yàn)槲覀兛蚣苤凶隽艘粋€(gè)操作，給document綁定了一個(gè)touch事件，阻止默認(rèn)事件。
document.addEventListener('touch', function(e){
e.preventDefault();
}, false)
這看起來(lái)也沒(méi)啥毛病，但是chrome在54版本之后加了個(gè)限制，就是綁定touch事件默認(rèn)你不會(huì)使用preventDefault。所以解決起來(lái)就簡(jiǎn)單了，我們手動(dòng)打開(kāi)就可以了。那么現(xiàn)在介紹下addEventListener，大家重用的就三個(gè)個(gè)參數(shù)，事件類(lèi)型，listener和是否事件冒泡，
target.addEventListener(type, listener[ ,useCapture])
但其實(shí)它第三個(gè)參數(shù)還可以是一個(gè)對(duì)象，有三個(gè)屬性：
target.addEventListener(type, listener[, option ])
option{
capture:Boolean,//是否在捕獲階段傳到改EventTarget執(zhí)行
once:Boolean,//表示只調(diào)用一次
passive:Boolean//是否調(diào)用preventDefault，本來(lái)默認(rèn)是FALSE，但是chrome54之后綁定touch事件會(huì)自動(dòng)變?yōu)門(mén)RUE。
}
4.移動(dòng)端可拖拽控件注意事項(xiàng)
在移動(dòng)端去做拖拽其實(shí)原理上跟pc端是一樣的，但是具體實(shí)施就有差別了。
觸點(diǎn)位置的確定：
在pc端一般使用event.clientX/Y來(lái)獲取鼠標(biāo)位置，但是在移動(dòng)端我們綁定touch事件，并沒(méi)有這個(gè)屬性，其實(shí)它被封在一個(gè)targetTouches屬性中，所以我們要多做一步
obj.addEventListener('touchstart', function(e){
var touch = e.targetTouches[0];
//觸點(diǎn)坐標(biāo)
touch.pageX/Y
})
拖動(dòng)距離
一般直接上來(lái)的話(huà)大家都是直接鼠標(biāo)挪動(dòng)到哪兒就把控件的位置定到哪兒。但是要注意，給控件動(dòng)態(tài)設(shè)置位置的時(shí)候，是設(shè)置左上角的位置，但是觸點(diǎn)卻可能在控件的任意位置，所以在給控件動(dòng)態(tài)設(shè)置位置的時(shí)候要把觸點(diǎn)和元素原本位置的差值減掉，如下：
var offsetX = 0;
obj.addEventListener('touchstart', function(e){
var touch = e.targetTouches[0];
//記錄觸點(diǎn)和控件位置的差值
offsetX = touch.pageX-obj.offsetLeft;
})
obj.addEventListener('touchmove', function(e){
var touch = e.targetTouches[0]
obj.style.left = touch.pageX-offsetX+'px';
})
控件拖動(dòng)范圍的控制
控件不管怎么拖動(dòng)，都要保證它是在可視區(qū)，所以在上下左右四邊去拖動(dòng)的時(shí)候是不能拖出去的。
當(dāng)控件有點(diǎn)擊事件
該控件可拖動(dòng)還可以點(diǎn)擊觸發(fā)事件，這個(gè)時(shí)候就要區(qū)分到底是拖動(dòng)還是點(diǎn)擊，我們這里處理是已300ms為區(qū)分，以及手指移動(dòng)的距離不小于某一值。首先在時(shí)間上控制，長(zhǎng)時(shí)間不放開(kāi)則不會(huì)觸發(fā)點(diǎn)擊事件，然后再次基礎(chǔ)上還要方式用戶(hù)快速拖動(dòng)，當(dāng)然這也防止了一種特殊的拖動(dòng)情況，在邊界處控件并沒(méi)有移動(dòng)，但是手指移動(dòng)了。
原生事件的阻止
這里主要是指長(zhǎng)時(shí)間按在控件上，會(huì)觸發(fā)復(fù)制和粘貼事件，所以我們這里要阻止這個(gè)事件，方法也很簡(jiǎn)單，css即可控制
-webkit-touch-callout:none; /*系統(tǒng)默認(rèn)菜單被禁用*/
-webkit-user-select:none; /*webkit瀏覽器*/
-khtml-user-select:none; /*早期瀏覽器*/
-moz-user-select:none;/*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
這是我自己寫(xiě)的一個(gè)https://github.com/Stevenzwzhai/plugs/tree/master/drag,可以作為參考。
