一、安卓設(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。

二、移動(dòng)端click事件300ms延遲

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

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

2.不用click事件，用移動(dòng)設(shè)備提供的原生touch事件，或某些移動(dòng)端手勢(shì)庫(kù)提供的tap事件。移動(dòng)端touch事件提供了?touchstart?、?touchmove?、?touchend等，對(duì)于簡(jiǎn)單的頁(yè)面，可以把?touchstart?或者?touchend?當(dāng)作tap來(lái)用，這樣可以解決300ms延遲問(wèn)題，但并不完美，比如手指接觸目標(biāo)元素，按住不放，慢慢移出響應(yīng)區(qū)域，依然會(huì)觸發(fā)?touchstart事件對(duì)應(yīng)的事件處理器(本不應(yīng)該觸發(fā))，touchend也有類似的問(wèn)題，所以，如果想模擬原生App的點(diǎn)擊事件，需要自己封裝一套tap事件，或者使用手勢(shì)庫(kù)的tap事件，tap事件原理也非常簡(jiǎn)單，是由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è)頁(yè)面的帶有href屬性的a標(biāo)簽的范圍內(nèi)，在點(diǎn)擊返回按鈕后，頁(yè)面快速切換到有a標(biāo)簽的頁(yè)面，300ms后觸發(fā)了click事件，從而觸發(fā)了a標(biāo)簽的意外跳轉(zhuǎn)，這個(gè)就是典型的點(diǎn)擊穿透問(wèn)題。罪魁禍?zhǔn)灼鋵?shí)就是a標(biāo)簽跳轉(zhuǎn)默認(rèn)是click事件觸發(fā)，而移動(dòng)端的touch事件觸發(fā)之后，依然會(huì)在300ms后觸發(fā)click事件。解決辦法其實(shí)在上面一條已經(jīng)提到了。

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

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

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

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

四、移動(dòng)端整體布局

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

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

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

五、input 的 compositionstart 和 compositionend 事件

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

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

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

.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è)備會(huì)自動(dòng)識(shí)別任何可能是電話號(hào)碼的字符串。設(shè)置telephone=no可以禁用這項(xiàng)功能。

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

user-select:none;

3.長(zhǎng)時(shí)間按住頁(yè)面出現(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.移動(dòng)端偽類 :active 不起作用

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

7.啟用硬件加速使動(dòng)畫(huà)更流暢

transform:translate3d(0,0,0);

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

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

9.transition閃屏

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

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

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

-webkit-backface-visibility:hidden;

10.CSS3 rotateY transition 在safari上有bug

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

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

11.移動(dòng)端選擇相片

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

總結(jié)

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

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