由<a href = "#" > 引发的思考

简介: 原文:由 引发的思考  前阵子在一个移动项目中,通过   的方式 绑定click 事件来提交一个表单,由于表单信息比较敏感,于是采用的post 同步提交的方式,原本到也没有什么。后来万恶的PM说 “你这个按钮呀,要固定在底部比较好” ,于是乎就通过 position:fixed 固定到底部了。
原文: 由<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)" > 终于万事大吉了。

目录
相关文章
|
Web App开发 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
总结和计划总是让人喜悦或镇痛,一方面以前一段时间没有荒废,能给现在的行动以信心,另一方面看到一年的时间并不能完成很多事情,需要抓紧时间。
583 0
|
4天前
|
弹性计算 安全 API
访问控制(RAM)|云上安全使用AccessKey的最佳实践
集中管控AK/SK的生命周期,可以极大降低AK/SK管理和使用成本,同时通过加密和轮转的方式,保证AK/SK的安全使用,本次分享为您介绍产品原理,以及具体的使用步骤。
101786 0
|
4天前
|
SQL 关系型数据库 分布式数据库
Doodle Jump — 使用Flutter&Flame开发游戏真不错!
用Flutter&Flame开发游戏是一种什么体验?最近网上冲浪的时候,我偶然发现了一个国外的游戏网站,类似于国内的4399。在浏览时,我遇到了一款经典的小游戏:Doodle Jump...
|
12天前
|
弹性计算 运维 安全
访问控制(RAM)|云上程序使用临时凭证的最佳实践
STS临时访问凭证是阿里云提供的一种临时访问权限管理服务,通过STS获取可以自定义时效和访问权限的临时身份凭证,减少长期访问密钥(AccessKey)泄露的风险。本文将为您介绍产品原理,以及具体的使用步骤。
151035 4
|
10天前
|
数据采集 存储 运维
提升团队工程交付能力,从“看见”工程活动和研发模式开始
本文从统一工程交付的概念模型开始,介绍了如何将应用交付的模式显式地定义出来,并通过工具平台落地。
119991 57
|
11天前
|
监控 负载均衡 Java
深入探究Java微服务架构:Spring Cloud概论
**摘要:** 本文深入探讨了Java微服务架构中的Spring Cloud,解释了微服务架构如何解决传统单体架构的局限性,如松耦合、独立部署、可伸缩性和容错性。Spring Cloud作为一个基于Spring Boot的开源框架,提供了服务注册与发现、负载均衡、断路器、配置中心、API网关等组件,简化了微服务的开发、部署和管理。文章详细介绍了Spring Cloud的核心模块,如Eureka、Ribbon、Hystrix、Config、Zuul和Sleuth,并通过一个电商微服务系统的实战案例展示了如何使用Spring Cloud构建微服务应用。
103503 8
|
12天前
|
人工智能 Serverless 对象存储
让你的文档从静态展示到一键部署可操作验证
通过函数计算的能力让阿里云的文档从静态展示升级为动态可操作验证,用户在文档中单击一键部署可快速完成代码的部署及测试。这一改变已在函数计算的活动沙龙中得到用户的认可。
120855 224
|
12天前
|
SQL 存储 数据可视化
Ganos H3地理网格能力解析与最佳实践
本文介绍了Ganos H3的相关功能,帮助读者快速了解Ganos地理网格的重要特性与应用实践。H3是Uber研发的一种覆盖全球表面的二维地理网格,采用了一种全球统一的、多层次的六边形网格体系来表示地球表面,这种地理网格技术在诸多业务场景中得到广泛应用。Ganos不仅提供了H3网格的全套功能,还支持与其它Ganos时空数据类型进行跨模联合分析,极大程度提升了客户对于时空数据的挖掘分析能力。
|
11天前
|
存储 缓存 安全
深度解析JVM世界:JVM内存结构
深度解析JVM世界:JVM内存结构