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/VBj2m2J