zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    pymongo中的连接操作:Connection()与MongoClient()
    Dynamics CRM2016 新功能之从CRM APP通过电子邮件发送页面链接
    [开发工具]_[Sublime Text 2]_[配置C++编译执行环境]
    struts2 全局拦截器,显示请求方法和參数
    A. Polo the Penguin and Strings
    linux驱动之LED驱动_1
    dbgrid控件如何能在左边显示行号?
    软件提示“没有活动事务”原因以及解决办法
    刷新dbgrid 而不失去当前行位置
    用ClientDataSet更新数据表,怎样自动生成行号? [问题点数:40分]
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/6605922.html
Copyright © 2011-2022 走看看