select 移动端 第一个无法选中_总结在移动端碰到的坑

一、安卓设备的select options的坑,尽量使用各浏览器内核都支持的api

在添加 OPTION 元素时

如果需要向指定索引前插入 OPTION,可以使用 options.add(option, index);

如果需要向 SELECT 尾部添加 OPTION,可以使用 options.add(option);

如果需要向指定索引处添加(或更改) OPTION,可以使用 options[index] = option。

在删除 OPTION 元素时

如果想删除指定索引处的 OPTION 元素,可以使用 select.remove(index) 或 options[index] = null;

如果想删除某个指定的 OPTION 元素,可以使用 select.remove(option);

如果想删除 SELECT 中所有 OPTION,可以使用 select.length = 0 或 options.length = 0。

二、移动端click事件300ms延迟

click事件,在移动端,会经过300ms的延迟后才触发。原因是,移动浏览器提供一个特殊的功能:双击(double tap)放大,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动作,而不是立即响应单击(click),等待的这段时间大约是300ms。那么怎么消除这个300ms延迟呢?

1.使用fastclick插件,会消除所有click事件的延迟,不推荐使用插件来解决这个问题

2.不用click事件,用移动设备提供的原生touch事件,或某些移动端手势库提供的tap事件。移动端touch事件提供了 touchstart 、 touchmove 、 touchend等,对于简单的页面,可以把 touchstart 或者 touchend 当作tap来用,这样可以解决300ms延迟问题,但并不完美,比如手指接触目标元素,按住不放,慢慢移出响应区域,依然会触发 touchstart事件对应的事件处理器(本不应该触发),touchend也有类似的问题,所以,如果想模拟原生App的点击事件,需要自己封装一套tap事件,或者使用手势库的tap事件,tap事件原理也非常简单,是由touchstart和touchend组合而成,首先要判断touchend和touchstart的偏移距离,然后阻止掉touchend事件300ms之后触发的click事件,并且始终以touchend事件作为触发的必要条件,下面是个demo:

functiontap(node,callback,scope) {

node.addEventListener(TOUCHSTART,function(e) {

x= e.touches[0].pageX;

y= e.touches[0].pageY;

});

node.addEventListener(TOUCHEND,function(e) {

e.stopPropagation();

e.preventDefault();var curx = e.changedTouches[0].pageX;var cury = e.changedTouches[0].pageY;if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {

callback.apply(scope, arguments);

}

});

}

下面是zepto的tap事件实现源码:

if (deltaX < 30 && deltaY < 30) {

tapTimeout= setTimeout(function() {var event = $.Event('tap')

event.cancelTouch=cancelAll

touch.el.trigger(event)if(touch.isDoubleTap) {if (touch.el) touch.el.trigger('doubleTap')

touch={}

}else{

touchTimeout= setTimeout(function() {

touchTimeout= null

if (touch.el) touch.el.trigger('singleTap')

touch={}

},250)

}

},0);

}

三、点击穿透

如果某个返回按钮的位置,恰好在要返回的这个页面的带有href属性的a标签的范围内,在点击返回按钮后,页面快速切换到有a标签的页面,300ms后触发了click事件,从而触发了a标签的意外跳转,这个就是典型的点击穿透问题。罪魁祸首其实就是a标签跳转默认是click事件触发,而移动端的touch事件触发之后,依然会在300ms后触发click事件。解决办法其实在上面一条已经提到了。

1.就是消费掉touch事件完成后的click事件。

2.不要混用touch和click事件。显然不可能都绑定click事件,因为要解决300ms延迟问题(除了fastclick),那么只能都绑定touch事件,这样click事件永远不会被触发。

综上二条,最好的办法就是自己封装一个tap事件,并且自己阻止掉300ms后的click事件,完美解决。

注意:zepto并没有阻止click事件,所以使用zepto的tap事件依然会导致点击穿透问题,你需要手动添加 e.preventDefault() 来阻止click事件。

四、移动端整体布局

移动端的整体布局一般来说可以分为上中下三个部分,分别为 header、main、footer,其中header、footer 是固定高度,分别固定在页面顶部和页面底部,而 main 是页面展示主体内容的部分,并且可以滚动。要实现这种布局,有两种办法:

1.最容易想到的就是header和footer为fixed,body最小高度为一屏,超出则滚动。这种布局有个优点,在ios的safari上页面的地址栏会随着 body 的滚动隐藏起来,缺点就是fixed在有input的页面会有各种兼容性问题(经测试,在固定到主屏幕并且去掉导航栏的情况下fixed有bug,移动端的各种浏览器中是没有问题的)

2.采取内滑的策略。具体的实现方式可能略有不同,但思路都是在元素内部滚动,而不是body。比如可以设置header和footer为absolute,main也为absolute,并且overflow-y为auto,或者用弹性布局的方式。在移动端元素内滑动会有不流畅的问题,建议加上-webkit-overflow-scrolling: touch,这样就能愉快的滚动了。这种布局的优点就是避免了使用fixed,缺点就是移动端浏览器中input框的光标闪烁问题(在滚动页面的时候,光标会错位,不跟随input框闪烁,原因是加了-webkit-overflow-scrolling: touch,导致滑动速度太快来不及重绘,解决方法是在你滑动页面的时候直接让input失去焦点,隐藏光标)

五、input 的 compositionstart 和 compositionend 事件

在input中输入中文的时候,在没有选定文字前,输入的每一个拼音字母也会触发input事件,这显然不是我们想要的。我们需要 compositionstart 和compositionend 事件来处理这个问题。compositionstart会在用户开始进行非直接输入的时候触发,compositionend会在点选候选词或者点击「选定」按钮之后触发。我们可以在compositionstart的时候将input事件上锁,让其不执行,在compositionend的时候再解锁,注意:compositionend 事件是在 input 事件后触发的。

六、移动端 1px border 实现

由于设备高分辨率屏的原因,逻辑像素的 1px 的 border 在移动设备上会用两个或三个物理像素来表示,所以看起来会感觉很粗。解决方案有很多,但兼容性最好的方案是用伪元素的 box-shadow 或 border 实现 border,然后用 transform: scale(.5) 缩小到原来的一半。具体如下:

.block{width:100px;height:100px;margin:10px;position:relative;

/*border: 1px solid red;*/

}.block:before{content:'';position:absolute;transform-origin:0 0;top:0;left:0;width:200%;height:200%;border:1px solid red;transform:scale(.5);

}

七、一些小坑

1.format-detection

默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

2.禁止复制、选中文本

user-select:none;

3.长时间按住页面出现闪退或禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none;

4.ios或安卓设备input等元素的特殊样式

-webkit-appearance:none;

5.ios或android下触摸元素时出现半透明灰色遮罩

-webkit-tap-highlight-color:rgba(255,255,255,0)

6.移动端伪类 :active 不起作用

document.addEventListener('touchstart',function(){},false);

7.启用硬件加速使动画更流畅

transform:translate3d(0,0,0);

8.旋转屏幕时,字体大小调整的问题

-webkit-text-size-adjust:100%;

9.transition闪屏

设置子元素以3D的方式呈现

-webkit-transform-style:preserve-3d;

设置进行转换的元素的背面在面对用户时是否可见

-webkit-backface-visibility:hidden;

10.CSS3 rotateY transition 在safari上有bug

当前转动的元素,在其上有元素覆盖它时,或在其下有元素被它覆盖时,会出现如下bug:

建议设置transform:translateZ(-1000px);

11.移动端选择相片

一定要显示的声明accept接收的类型

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

零基础初学c语言常见的10个错误

时光匆匆&#xff0c;新的学年又即将要来临。很多有意愿报我们学院的准学弟学妹们&#xff0c;都开始提前学习c语言这门功课。 如有小伙伴想自学&#xff0c;可以进群731871503进行交流学习&#xff0c;提升编程&#xff0c;共同进步 但是很多学弟学妹们之前都没有学习过太多相…

centos7安装yum_centos7下yum方式安装jenkins

一、首先安装java组件1、可以直接yum安装yum install -y java2、或者下载jdk的包&#xff0c;设置环境变量也是可以的https://download.oracle.com/otn/java/jdk/11.0.510/e51269e04165492b90fa15af5b4eb1a5/jdk-11.0.5_linux-x64_bin.tar.gz?AuthParam1578369202_107ade17483…

感知器及其在python中的实现_(二)感知器算法及其python实现

出发点一旦判别函数的形式确定下来&#xff0c;不管它是线性的还是非线性的&#xff0c;剩下的问题就是如何确定它的系数。在模式识别中&#xff0c;系数确定的一个主要方法就是通过对已知样本的训练和学习来得到。感知器算法就是通过训练样本模式的迭代和学习&#xff0c;产生…

原来C语言和其他高级语言的最大的区别是这个...

我们知道C语言和其他高级语言,最大的区别就是C语言是要操作内存。 如有小伙伴想自学&#xff0c;可以进群731871503进行交流 学习&#xff0c;提升编程&#xff0c;共同进步 我们需要知道——变量&#xff0c;其实是内存地址的一个抽像名字罢了。在静态编译的程序中&#xff…

python爬虫登录网站_python爬虫19 | 遇到需要的登录的网站怎么办?用这3招轻松搞定!...

你好 由于你是游客 无法查看本文 请你登录再进 谢谢合作当你在爬某些网站的时候 需要你登录才可以获取数据 咋整&#xff1f; 莫慌 小帅b把这几招传授给你 让你以后从容应对那么 接下来就是登录的常见方法无非是这两种 1、让你输入帐号和密码登录2、让你输入帐号密码验证码登录…

ei会议论文录用但不参加会议_美国研究生和博士申请论文发表真的很重要吗?...

在美国研究生和博士申请的过程中&#xff0c;论文可以直观体现申请者研究经历&#xff0c;一篇高质量的论文能够让美国招生官能够快速了解到申请者对所申请专业的理解&#xff0c;同时能够通过文章论述直观感受到申请者的学术思维力、判断力、逻辑分析能力等&#xff0c;这是简…

干货 | 大牛谈嵌入式C语言的高级用法

C语言程序设计是我们的专业基础课&#xff0c;但是C语言本身却是一个非常强大的工具&#xff0c;它是到目前为止最为广泛使用的工具&#xff0c;并且在可以预见的将来&#xff0c;它仍然是皈依为程序员的人们心中的神器。这个工具作什么的呢&#xff1f;它在人和机器之间建立了…

python提示对话框自动关闭_Python - tkinter:打开和关闭对话框窗口

我是Python新手&#xff0c;必须编写一个简单的GUI程序&#xff0c;为了简单起见&#xff0c;我选择在tkinter中这样做。 我想要的GUI应该非常类似于在Windows上安装程序时经常遇到的对话框&#xff08;您想要安装的位置&#xff0c;您想要的模块等&#xff09;。基本上当它在p…

第六篇:如何学习C语言?

现在很多人初学者直接选择C语言的人已经变得越来越少了&#xff0c;主要原因还是在招聘岗位数量上无法和java&#xff0c;php等高级语言想媲美&#xff0c;但并不代表C语言已经穷途末路没有前景了&#xff0c;C语言的角色从前台变成了后台服务&#xff0c;在一些关键领域还承担…

long mode 分页_x86 系列 CPU 内存寻址模式总结

说明:S16 表示 16 位段寄存器P16 表示 16 位的普通寄存器, 立即数, 结果为 16 位的表达式等等.P32 同上, 只是扩展到 32 位.一. CPU 概况1. 8086: 8 位数据线, 16 位地址线. 8 位数据线和前8位地址线合用.2. 8088: 16位数据线, 16位地址线. 数据线和地址线完全分时合用.3. 8018…

典型相关分析_2020-2025年中国海水淡化行业发展前景与投资预测分析报告

《2020-2025年中国海水淡化行业发展前景与投资预测分析报告》利用中经未来长期对海水淡化市场跟踪搜集的一手数据&#xff0c;从行业的高度全面而准确的构建分析体系。报告主要分析了海水淡化行业的发展概况、海水淡化行业的发展环境、国外海水淡化行业发展经验借鉴、中国海水淡…

语言还是你不得不服的大哥级别编程语言!

直到今天&#xff0c;有人在喊C语言过时的语言&#xff0c;还有什么值得学习的&#xff0c;现在看Python&#xff0c;PHP等语言现在都很容易用&#xff0c;谁还在学习老C语言&#xff0c;其实这是真的吗&#xff1f;作者下载了两种语言的源代码作为下载器。由于空间的限制&…

字节跳动测试开发4轮面试_字节跳动测试开发工程师一面总结

公司简介:字节跳动是全球发展速度最快的科技公司之一&#xff0c;公司旗下拥有今日头条、抖音、西瓜视频、懂车帝、Faceu激萌、轻颜相机、飞书、皮皮虾、TikTok等多款海内外产品&#xff0c;全系产品月活用户超过15亿。目前还在积极探索游戏、教育、金融领域。字节跳动办公室遍…

python爬虫好学不_python爬虫好学吗

python爬虫难学吗 简单来说互联网是由一个个站点和网络设备组成的大网&#xff0c;我们通过浏览器访问站点&#xff0c;站点把HTML、JS、CSS代码返回给浏览器&#xff0c;这些代码经过浏览器解析、渲染&#xff0c;将丰富多彩的网页呈现我们眼前。爬虫是什么&#xff1f; 如果我…

力压Java、C语言!Python 获2018年度编程语言

TIOBE 近日宣布&#xff1a;Python 成为 2018 年度编程语言&#xff0c;Python之所以获得这个称号&#xff0c;是因为它在2018年的排名中比其他所有语言都高。Python语言赢得了3.62%的选票&#xff0c;紧随其后的是Visual Basic . net&#xff08;3.2%&#xff09;和Java&#…

.idea文件夹是做什么的_33 个 IDEA 最牛配置,写代码太爽了!

作者&#xff1a;琦彦blog.csdn.net/fly910905/article/details/778683001.设置maven1.在File->settings->搜索maven2.Mavan home directory--设置maven安装包的bin文件夹所在的位置3.User settings file--设置setting文件所在的位置4.Local repository--设置本地仓库2.I…

耳挂式蓝牙耳机原理_一种耳挂式蓝牙耳机的制作方法

本实用新型涉及蓝牙耳机技术领域&#xff0c;特别涉及一种耳挂式蓝牙耳机。背景技术&#xff1a;随着蓝牙耳机技术的使用普及&#xff0c;蓝牙耳机在智能设备以及智能通信中得到了广泛地应用。自蓝牙耳机出现以来&#xff0c;蓝牙耳机适用于各种场合&#xff0c;蓝牙耳机在佩戴…

学习C语言什么都做不了,为什么你还学?是这样吗?

对于大部分初学者&#xff0c;学习C语言的目的是希望做一名合格的程序员&#xff0c;开发出靠谱的软件来。但是学了C语言的基本语法后&#xff0c;发现只能开发“黑底白字”的DOS程序&#xff0c;完全没有漂亮的界面和生动的交互。于是学数据结构&#xff0c;学算法&#xff0c…

手动卸载_一种手动液压一体式卸载扳手

摘要一种手动液压一体式卸载扳手&#xff0c;属于煤矿井下施工设备领域&#xff0c;可解决井下回收单体柱时存在的安全隐患的问题&#xff0c;包括扳手腔体、柱塞、堵头和加长把手&#xff0c;扳手腔体包括半圆柱体Ⅰ以及与半圆柱体Ⅰ连接的半圆柱体Ⅱ&#xff0c;所述半圆柱体…

docker运行jenkins挂掉_【图文】Jenkins教程集成SonarQube

什么是SonarQube?看看维基百科的说明&#xff1a;SonarQube与CI/CD架构图SonarQube与CI/CD架构图Docker运行SonarQube简单了解之后&#xff0c;开始安装SonarQube.这里用Docker安装注&#xff1a;这里用mysql来存储SonarQube的数据&#xff0c;SonarQube7.9起已经不在支持mysq…