Fastclick致使IOS下多個 select ,點擊某一個,焦點不停變換的bug

一個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

相關文章
相關標籤/搜索