一、安卓設(shè)備的select options的坑，盡量使用各瀏覽器內(nèi)核都支持的api

在添加 OPTION 元素時(shí)

如果需要向指定索引前插入 OPTION，可以使用 options.add(option, index)；

如果需要向 SELECT 尾部添加 OPTION，可以使用 options.add(option)；

如果需要向指定索引處添加(或更改) OPTION，可以使用 options[index] = option。

在刪除 OPTION 元素時(shí)

如果想刪除指定索引處的 OPTION 元素，可以使用 select.remove(index) 或 options[index] = null；

如果想刪除某個(gè)指定的 OPTION 元素，可以使用 select.remove(option)；

如果想刪除 SELECT 中所有 OPTION，可以使用 select.length = 0 或 options.length = 0。

二、移動端click事件300ms延遲

click事件，在移動端，會經(jīng)過300ms的延遲后才觸發(fā)。原因是，移動瀏覽器提供一個(gè)特殊的功能：雙擊(double tap)放大，用戶碰觸頁面之后，需要等待一段時(shí)間來判斷是不是雙擊(double tap)動作，而不是立即響應(yīng)單擊(click)，等待的這段時(shí)間大約是300ms。那么怎么消除這個(gè)300ms延遲呢？

1.使用fastclick插件，會消除所有click事件的延遲，不推薦使用插件來解決這個(gè)問題

2.不用click事件，用移動設(shè)備提供的原生touch事件，或某些移動端手勢庫提供的tap事件。移動端touch事件提供了?touchstart?、?touchmove?、?touchend等，對于簡單的頁面，可以把?touchstart?或者?touchend?當(dāng)作tap來用，這樣可以解決300ms延遲問題，但并不完美，比如手指接觸目標(biāo)元素，按住不放，慢慢移出響應(yīng)區(qū)域，依然會觸發(fā)?touchstart事件對應(yīng)的事件處理器(本不應(yīng)該觸發(fā))，touchend也有類似的問題，所以，如果想模擬原生App的點(diǎn)擊事件，需要自己封裝一套tap事件，或者使用手勢庫的tap事件，tap事件原理也非常簡單，是由touchstart和touchend組合而成，首先要判斷touchend和touchstart的偏移距離，然后阻止掉touchend事件300ms之后觸發(fā)的click事件，并且始終以touchend事件作為觸發(fā)的必要條件，下面是個(gè)demo：

functiontap(node,callback,scope) {

node.addEventListener(TOUCHSTART,function(e) {

x= e.touches[0].pageX;

y= e.touches[0].pageY;

});

node.addEventListener(TOUCHEND,function(e) {

e.stopPropagation();

e.preventDefault();var curx = e.changedTouches[0].pageX;var cury = e.changedTouches[0].pageY;if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {

callback.apply(scope, arguments);

}

});

}

下面是zepto的tap事件實(shí)現(xiàn)源碼：

if (deltaX < 30 && deltaY < 30) {

tapTimeout= setTimeout(function() {var event = $.Event('tap')

event.cancelTouch=cancelAll

touch.el.trigger(event)if(touch.isDoubleTap) {if (touch.el) touch.el.trigger('doubleTap')

touch={}

}else{

touchTimeout= setTimeout(function() {

touchTimeout= null

if (touch.el) touch.el.trigger('singleTap')

touch={}

},250)

}

},0);

}

三、點(diǎn)擊穿透

如果某個(gè)返回按鈕的位置，恰好在要返回的這個(gè)頁面的帶有href屬性的a標(biāo)簽的范圍內(nèi)，在點(diǎn)擊返回按鈕后，頁面快速切換到有a標(biāo)簽的頁面，300ms后觸發(fā)了click事件，從而觸發(fā)了a標(biāo)簽的意外跳轉(zhuǎn)，這個(gè)就是典型的點(diǎn)擊穿透問題。罪魁禍?zhǔn)灼鋵?shí)就是a標(biāo)簽跳轉(zhuǎn)默認(rèn)是click事件觸發(fā)，而移動端的touch事件觸發(fā)之后，依然會在300ms后觸發(fā)click事件。解決辦法其實(shí)在上面一條已經(jīng)提到了。

1.就是消費(fèi)掉touch事件完成后的click事件。

2.不要混用touch和click事件。顯然不可能都綁定click事件，因?yàn)橐鉀Q300ms延遲問題(除了fastclick)，那么只能都綁定touch事件，這樣click事件永遠(yuǎn)不會被觸發(fā)。

綜上二條，最好的辦法就是自己封裝一個(gè)tap事件，并且自己阻止掉300ms后的click事件，完美解決。

注意：zepto并沒有阻止click事件，所以使用zepto的tap事件依然會導(dǎo)致點(diǎn)擊穿透問題，你需要手動添加?e.preventDefault() 來阻止click事件。

四、移動端整體布局

移動端的整體布局一般來說可以分為上中下三個(gè)部分，分別為 header、main、footer，其中header、footer 是固定高度，分別固定在頁面頂部和頁面底部，而 main 是頁面展示主體內(nèi)容的部分，并且可以滾動。要實(shí)現(xiàn)這種布局，有兩種辦法：

1.最容易想到的就是header和footer為fixed，body最小高度為一屏，超出則滾動。這種布局有個(gè)優(yōu)點(diǎn)，在ios的safari上頁面的地址欄會隨著 body 的滾動隱藏起來，缺點(diǎn)就是fixed在有input的頁面會有各種兼容性問題(經(jīng)測試，在固定到主屏幕并且去掉導(dǎo)航欄的情況下fixed有bug，移動端的各種瀏覽器中是沒有問題的)

2.采取內(nèi)滑的策略。具體的實(shí)現(xiàn)方式可能略有不同，但思路都是在元素內(nèi)部滾動，而不是body。比如可以設(shè)置header和footer為absolute，main也為absolute，并且overflow-y為auto，或者用彈性布局的方式。在移動端元素內(nèi)滑動會有不流暢的問題，建議加上-webkit-overflow-scrolling: touch，這樣就能愉快的滾動了。這種布局的優(yōu)點(diǎn)就是避免了使用fixed，缺點(diǎn)就是移動端瀏覽器中input框的光標(biāo)閃爍問題(在滾動頁面的時(shí)候，光標(biāo)會錯(cuò)位，不跟隨input框閃爍，原因是加了-webkit-overflow-scrolling:?touch，導(dǎo)致滑動速度太快來不及重繪，解決方法是在你滑動頁面的時(shí)候直接讓input失去焦點(diǎn)，隱藏光標(biāo))

五、input 的 compositionstart 和 compositionend 事件

在input中輸入中文的時(shí)候，在沒有選定文字前，輸入的每一個(gè)拼音字母也會觸發(fā)input事件，這顯然不是我們想要的。我們需要?compositionstart 和compositionend 事件來處理這個(gè)問題。compositionstart會在用戶開始進(jìn)行非直接輸入的時(shí)候觸發(fā)，compositionend會在點(diǎn)選候選詞或者點(diǎn)擊「選定」按鈕之后觸發(fā)。我們可以在compositionstart的時(shí)候?qū)nput事件上鎖，讓其不執(zhí)行，在compositionend的時(shí)候再解鎖，注意：compositionend 事件是在 input 事件后觸發(fā)的。

六、移動端 1px border 實(shí)現(xiàn)

由于設(shè)備高分辨率屏的原因，邏輯像素的 1px 的 border 在移動設(shè)備上會用兩個(gè)或三個(gè)物理像素來表示，所以看起來會感覺很粗。解決方案有很多，但兼容性最好的方案是用偽元素的 box-shadow 或 border 實(shí)現(xiàn) border，然后用 transform: scale(.5)?縮小到原來的一半。具體如下：

.block{width:100px;height:100px;margin:10px;position:relative;

/*border: 1px solid red;*/

}.block:before{content:'';position:absolute;transform-origin:0 0;top:0;left:0;width:200%;height:200%;border:1px solid red;transform:scale(.5);

}

七、一些小坑

1.format-detection

默認(rèn)情況下，設(shè)備會自動識別任何可能是電話號碼的字符串。設(shè)置telephone=no可以禁用這項(xiàng)功能。

2.禁止復(fù)制、選中文本

user-select:none;

3.長時(shí)間按住頁面出現(xiàn)閃退或禁止 iOS 彈出各種操作窗口

-webkit-touch-callout:none;

4.ios或安卓設(shè)備input等元素的特殊樣式

-webkit-appearance:none;

5.ios或android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩

-webkit-tap-highlight-color:rgba(255,255,255,0)

6.移動端偽類 :active 不起作用

document.addEventListener('touchstart',function(){},false);

7.啟用硬件加速使動畫更流暢

transform:translate3d(0,0,0);

8.旋轉(zhuǎn)屏幕時(shí)，字體大小調(diào)整的問題

-webkit-text-size-adjust:100%;

9.transition閃屏

設(shè)置子元素以3D的方式呈現(xiàn)

-webkit-transform-style:preserve-3d;

設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時(shí)是否可見

-webkit-backface-visibility:hidden;

10.CSS3 rotateY transition 在safari上有bug

當(dāng)前轉(zhuǎn)動的元素，在其上有元素覆蓋它時(shí)，或在其下有元素被它覆蓋時(shí)，會出現(xiàn)如下bug：

建議設(shè)置transform:translateZ(-1000px);

11.移動端選擇相片

一定要顯示的聲明accept接收的類型

總結(jié)

以上是生活随笔為你收集整理的select 移动端 第一个无法选中_总结在移动端碰到的坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。