由<a href = "#" > 引发的思考
前阵子在一个移动项目中,通过 <a href = "#" > 的方式 绑定click 事件来提交一个表单,由于表单信息比较敏感,于是采用的post 同步提交的方式,原本到也没有什么。后来万恶的PM说 “你这个按钮呀,要固定在底部比较好” ,于是乎就通过 position:fixed 固定到底部了。那么,问题来了 , 在ios 下,虚拟键盘是浮在页面上层的,导致的结果是当键盘收起后,浮在最底部的按钮不在最底下,而跑到中间来了,(极端条件下还可能挡住输入框导致无法输入),并且随着屏幕的滚动而滚动,,(表现类似于absolute) ,,高大上的苹果也是真心坑了一回。
怎么办呢? 两种方案,一滚动时动态计算位置,实时监控位置必定是要消耗性能的,二是由于无法监控到虚拟键盘打开或者关闭,所以只能通过对表单元素绑定focus和blur事件来改变按钮position来达到想要的效果。于是balabala又搞完了。
搞完后就开始测试,然后有发现当有input元素处于focus状态时,点击提交按钮,无效!!!我再点,好了。。。
原因是因为blur事件会阻止click事件的执行。。。
好,我继续改。
blur事件会阻止click事件的执行,但是不会阻止touch事件,于是想起把click改成tap吧。还真行。不用再点击两次了。
大功告成,我得意的笑,我真聪明。
balabala 就上线了。
一上线发现提交不了了。。。有一定概率出现请求被canceled 。。。
各种google没找出原因,,问题出在哪里?click是没有问题,换成tap便有问题了,于是乎查了一下 touch event 的执行顺序,大致是这样
于是我测试 mouseup 是好的,touchend也是有问题的,,tap也是有问题的,,而当我用tap事件,handler处理的时候延迟100ms再$('*Form').submit() 又可以正常提交了。原来是submit执行的时机问题。
继续各种debug 抓虫子,,历史遗留的坑啊,,
最终到 <a href = "#" > 了,,当按钮点击事件执行,在请求hash前执行submit , 请求还没返回,由于改变了hash,同步的submit被cancel了,,,而由于各种原因submit执行前,hash已经改变的话就可以顺利提交了,,
于是乎,把 <a href = "#" > 改成 <a href = "javascript:void(0)" > 终于万事大吉了。
由<a href = "#" > 引发的思考的更多相关文章
- Spring之LoadTimeWeaver——一个需求引发的思考---转
原文地址:http://www.myexception.cn/software-architecture-design/602651.html Spring之LoadTimeWeaver——一个需求引 ...
- 由SecureCRT引发的思考和学习
由SecureCRT引发的思考和学习 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMDEwMA==&mid=2652500597&idx=1& ...
- 解决一道leetcode算法题的曲折过程及引发的思考
写在前面 本题实际解题过程是 从 40秒 --> 24秒 -->1.5秒 --> 715ms --> 320ms --> 48ms --> 36ms --> ...
- 【思考】由安装zabbix至排障php一系列引发的思考
[思考]由安装zabbix至排障php一系列引发的思考 linux的知识点林立众多,很有可能你在排查一个故障的时候就得用到另一门技术的知识: 由于linux本身的应用依赖的库和其它环境环环相扣,但又没 ...
- 曲演杂坛--一条DELETE引发的思考
原文:曲演杂坛--一条DELETE引发的思考 场景介绍: 我们有一张表,专门用来生成自增ID供业务使用,表结构如下: CREATE TABLE TB001 ( ID ,) PRIMARY KEY, D ...
- class_copyIvarList方法获取实例变量问题引发的思考
在runtime.h中,你可以通过其中的一个方法来获取实例变量,那就是class_copyIvarList方法,具体的实现如下: - (NSArray *)ivarArray:(Class)cls { ...
- 由一个emoji引发的思考
由一个emoji引发的思考 从毕业以来,基本就一直在做移动端,但是一直就关于移动端的开发,各种适配问题的解决,在日常搬砖中处理了就过了,也没有把东西都沉淀下来,觉得甚是寒颜.现就一个小bug,让我们来 ...
- 一次composer错误使用引发的思考
一次composer错误使用引发的思考 这个思考源自于一个事故.让我对版本依赖重新思考了一下. 事故现象 一个线上的管理后台,一个使用laravel搭建的管理后台,之前在线上跑的好好的,今天comop ...
- 一个ScheduledExecutorService启动的Java线程无故挂掉引发的思考
2018年12月12日18:44:53 一个ScheduledExecutorService启动的Java线程无故挂掉引发的思考 案件现场 不久前,在开发改造公司一个端到端监控日志系统的时候,出现了一 ...
随机推荐
- SpringMVC与Mybatis框架整合遇到的坑(转)
最近在做springmvc与mybatis的项目,遇到一些比较坑的问题.花了许多时间却发现其实解决的办法很简单.这里主要是讲我自己在整合这两个框架的时候遇到的一些问题做一个整理.希望遇到和我同样问题的 ...
- URAL1113(数学)
题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1113 根据样例分析: 1.沙漠只有500公里或者更短,这时很简单,一次搞定. 2.沙漠6 ...
- WPF-20:richtextbox相关操作(转)
WPF中的richtextbox与winform中的richtextbox的使用不同,看看下面的基本操作: 一.取出richTextBox里面的内容 (1)将richTextBox的内容以字符串的形 ...
- emeditor只显示特定类型的文件
emeditor过滤文件类型,右侧资源管理器中只显示特定类型的文件,如只显示java,xml,txt,properties等文件,而不显示doc,jpg,xls等emeditor不能打开的文件. 右击 ...
- 从零開始学android<SeekBar滑动组件.二十二.>
拖动条能够由用户自己进行手工的调节,比如:当用户须要调整播放器音量或者是电影的播放进度时都会使用到拖动条,SeekBar类的定义结构例如以下所看到的: java.lang.Object ↳ an ...
- JS兼容的方式来获取浏览器的宽度
<script type="text/javascript"> //need to wait until onload so body is available win ...
- Android至ViewPager添加切换动画——使用属性动画
转载请注明出处:http://blog.csdn.net/allen315410/article/details/44200623 ViewPager作为Android最经常使用的的组件之中的一个.相 ...
- HDU 1164 Eddy's research I【素数筛选法】
思路:将输入的这个数分成n个素数的相乘的结果,用一个数组存储起来.之后再输出就能够了 Eddy's research I Time Limit: 2000/1000 MS (Java/Others) ...
- 逆向project第004篇:令计算器程序显示汉字(下)
一.前言 钩子技术是一项很有有用价值的技术.在Windows下HOOK技术的方法比較多,使用比較灵活,常见的应用层的HOOK方法有Inline HOOK(详见<反病毒攻防研究第012篇:利用In ...
- hdu 2082 生成函数
主题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2082 找单词 Time Limit: 1000/1000 MS (Java/Others) Me ...