最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>、<input>、<textarea>。这是因为iScroll要监听整个页面事件,为了达到 最优效果,它默认禁用了所有元素的默认事件(但也有例外,如<a>默认事件不受影响),所以才造成这些表单元素点击没有反应,无法正常聚焦。

我们打开 iscroll.js ,找到这一行:
onBeforeScrollStart : function(e){ e.preventDefault(); },
将其改为:
onBeforeScrollStart : function(e){var nodeType =
e.explicitOriginalTarget ?
e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ?
e.target.nodeName.toLowerCase() : ”);if(nodeType != ‘select’ &&
nodeType != ‘option’ && nodeType != ‘input’ && nodeType
!= ‘textarea’){e.preventDefault();}},

这样,input及textarea可以正常聚焦了,但是发现select点击还是没有弹出下拉列表框。

这是因为 iscroll
默认使用的是css的transform变形中的translate3d实现区域滚动,每次滚动实际是改变translate3d中的y轴值,实际的
dom位置并没有发生变化。translate3d会导致页面的焦点错误,系统级下拉菜单的显示则会导致其出现显示偏离。

控制滚动模式的代码默认是:useTransform:
true。好在iscroll提供了另一种滚动方式,基于绝对定位位置变化的滚动。修改为useTransform:
false之后,iscroll就会使用对定位位方式来实现滚动,该方式是我们在web开发中模拟动画的最常用方式,滚动之后dom的实际位置也同步发生
了变化,不会出现错位偏离现象。

以上修改后,所有的表单元素都能正常使用了,不过需要注意,使用对position决定定位后,滚动区的宽度默认会自适应内容宽度,而不是父元素的100%,所以最好将滚动区域宽度设为100%。

iScroll滚动区域中select、input、textarea元素无法点击的Bug修复的更多相关文章

  1. IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug

    尽管在项目中测试人员已经慢慢淡化了IE6的测试,但是IE7依然还是要纳入测试范围. 最近碰到一个IE7的蛋疼bug,在页面上设置了一个局部的滚动区域,在拖动滚动条的时候,滚动区域内设置了相对定位或绝对 ...

  2. PyQt(Python+Qt)学习随笔:怎么在QScrollArea滚动区域中展示子部件的超长内容?

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域可以针对部署在其上的子部件在不可见时进行滚动展示,但这种滚动展示仅只能展示内容层可见范围的子 ...

  3. Js控制iphone端的input/textarea元素失去焦点时隐藏键盘

    原文http://www.it165.net/pro/html/201404/12672.html function objBlur(obj, time){ if(typeof obj != 'str ...

  4. js控制ios端的input/textarea元素失去焦点时隐藏键盘

    同事在测试产品时发现这样一个:“某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去” 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测 ...

  5. js中怎么为同级元素添加点击事件

    事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...

  6. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  7. 如何disabled禁用所有表单input输入框元素

    转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...

  8. chrome 下 input[file] 元素cursor设置pointer不生效的解决

    https://jingyan.baidu.com/article/48b558e32fabb67f38c09a81.html 环境是chrome浏览器,今天发现为html网页中的input [fil ...

  9. 第15.29节 PyQt(Python+Qt)入门学习:containers容器类部件QScrollArea滚动区域详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 Scroll Area提供了一个呈现在其他部件上的可滚动区域视图,滚动区域用于显示框架内的 ...

随机推荐

  1. Data storage on the batch layer

    4.1 Storage requirements for the master dataset To determine the requirements for data storage, you ...

  2. IOS演变史

    我是从iOS5开始接触iPhone操作系统,对此系统也算是有爱有恨,今天从网上整理以下整个iOS发展的历史,了解了解也算做以后闲时讨论的一个话题. 电脑需要操作系统,手机也需要,2007年,苹果带着旗 ...

  3. UISegmentedControl的详细使用

    当用户输入不仅仅是布尔值时,可使用分段控件(UISegmentedControl).分段控件提供一栏按钮(有时称为按钮栏),但只能激活其中一个按钮.分段控件会导致用户在屏幕上看到的内容发生变化.它们常 ...

  4. linux命令:head

    1.命令介绍: head用来显示文件的开头的一部分. 2.命令格式: head [选项] 文件 3.命令参数: -q 隐藏文件名 -v 显示文件名 -c<字节> 显示字节数 -n<行 ...

  5. Jquery和Javascript 实际项目中写法基础 (1)

    一.JS 是什么,jquery 是什么  就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...

  6. 3、JS中的语句

    1.块语句 常用于组合0~多个语句:语法:{语句1;语句2……} *没有块级作用域:如:在for循环里面定义一个自增数 i,可以在for循环外取到它跳出循环时的值,而且for循环里面新定义的数据也能取 ...

  7. Understanding Linux /proc/cpuinfo

    http://www.richweb.com/cpu_info A hyperthreaded processor has the same number of function units as a ...

  8. Linux C 创建目录函数mkdir相关(转-清新居士)

    I.Linux C 创建目录函数mkdir的mode设置问题 函数原型: #include <sys/stat.h> int mkdir(const char *path, mode_t ...

  9. [NOIP2011] 计算系数(二项式定理)

    题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...

  10. hdu3078 伪LCA……

    题意:有 n 点的一颗树,每个节点有格子的权值,现在有两种操作,修改一个点的权值,或者求两点之间的路径上的第 k 大的权值. 其实看到这个题,就在 YY 各种做法,询问后得到貌似可能是关于主席树.树链 ...