UDN-企业互联网技术人气社区

板块导航

浏览  : 993
回复  : 2

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

[复制链接]
葡萄柚的头像 楼主
发表于 2017-1-5 15:57:14 | 显示全部楼层 |阅读模式
  一个tab下面多个select,点击其中一个,有时候焦点会跳过好几个,页面越长,越难选择。

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

  问题是由fastclick对select做处理导致。

  在源码里的onTouchEnd事件下有一段判断是否需要needsFocus的代码。。问题的根源
  1. // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open.
  2. // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others)
  3. if (!deviceIsIOS || targetTagName !== 'select') {
  4.      this.targetElement = null;
  5.      event.preventDefault();
  6. }
复制代码

  这断代码大致是为了在ios 下 select 时 this.targetElement 不置空继续执行原生选择事件,好打开select menu,但是却导致了二次触发。也就是当ios下页面过长,触发select导致页面滑动的情况下发生二次触发,焦点错位的原因。

  方案一

  如果是select,不使用fastclick。。
  1. /**
  2. * On touch start, record the position and scroll offset.
  3. *
  4. * @param {Event} event
  5. * @returns {boolean}
  6. */
  7. FastClick.prototype.onTouchStart = function(event) {
  8. var targetElement, touch, selection;

  9.     // Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).
  10.     if (event.targetTouches.length > 1) {
  11.         return true;
  12.     }

  13.     targetElement = this.getTargetElementFromEventTarget(event.target);
  14.     touch = event.targetTouches[0];

  15.     if (deviceIsIOS) {
  16.         //add by 我 解决select 点击老跳转的问题 begin
  17.         var nodeName = targetElement.nodeName.toLowerCase();
  18.         var typeAttribute = targetElement.getAttribute('type');
  19.         if (nodeName === "select"){
  20.             return false;
  21.         }
  22. //add by 我 解决select 点击老跳转的问题  end
复制代码

  方案二
  1. // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open.
  2. // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others)
  3. // if (!deviceIsIOS || targetTagName !== 'select') {}
  4. this.targetElement = null;
  5. event.preventDefault();
复制代码

  使用light7时也出现此问题。

相关帖子

发表于 2017-1-5 15:57:45 来自手机 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老会员的份上回复一下
使用道具 举报

回复

发表于 2017-1-6 06:45:46 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部