fastclick导致IOS下多个 select ,点击某一个,焦点不停变换的bug

luoyjx · 2017-01-03 10:09 · 18次阅读

一个tab下面多个select,点击其中一个,有时候焦点会跳过好几个,页面越长,越难选择。

解决方法在此处: https://github.com/sdc-alibaba/SUI-Mobile/issues/581

问题是由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时也出现此问题。

暂无评论

登录后可以进行评论。没有账号?马上注册