一個tab下面多個select,點擊其中一個,有時候焦點會跳過好幾個,頁面越長,越難選擇。 問題是由fastclick對select作處理致使。 在源碼裏的onTouchEnd事件下有一段判斷是否須要needsFocus的代碼。。問題的根源 // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open. // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others) if (!deviceIsIOS || targetTagName !== 'select') { this.targetElement = null; event.preventDefault(); } 這斷代碼大體是爲了在ios 下 select 時 this.targetElement 不置空繼續執行原生選擇事件,好打開select menu,可是卻致使了二次觸發。也就是當ios下頁面過長,觸發select致使頁面滑動的狀況下發生二次觸發,焦點錯位的緣由。 方案一 若是是select,不使用fastclick。。 /** * On touch start, record the position and scroll offset. * * @param {Event} event * @returns {boolean} */ FastClick.prototype.onTouchStart = function(event) { var targetElement, touch, selection; // Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111). if (event.targetTouches.length > 1) { return true; } targetElement = this.getTargetElementFromEventTarget(event.target); touch = event.targetTouches[0]; if (deviceIsIOS) { //add by 我 解決select 點擊老跳轉的問題 begin var nodeName = targetElement.nodeName.toLowerCase(); var typeAttribute = targetElement.getAttribute('type'); if (nodeName === "select"){ return false; } //add by 我 解決select 點擊老跳轉的問題 end 方案二 // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open. // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others) // if (!deviceIsIOS || targetTagName !== 'select') {} this.targetElement = null; event.preventDefault(); 使用light7時也出現此問題。
轉http://www.tuicool.com/articles/VBj2m2Jnode