<a href="

<a href="

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

  前阵子在一个移动项目中,通过 <a href = “#” >  的方式 绑定click 事件来提交一个表单,由于表单信息比较敏感,于是采用的post 同步提交的方式,原本到也没有什么。后来万恶的PM说 “你这个按钮呀,要固定在底部比较好” ,于是乎就通过 position:fixed 固定到底部了。那么,问题来了 , 在ios 下,虚拟键盘是浮在页面上层的,导致的结果是当键盘收起后,浮在最底部的按钮不在最底下,而跑到中间来了,(极端条件下还可能挡住输入框导致无法输入),并且随着屏幕的滚动而滚动,,(表现类似于absolute) ,,高大上的苹果也是真心坑了一回。

  怎么办呢? 两种方案,一滚动时动态计算位置,实时监控位置必定是要消耗性能的,二是由于无法监控到虚拟键盘打开或者关闭,所以只能通过对表单元素绑定focus和blur事件来改变按钮position来达到想要的效果。于是balabala又搞完了。

  搞完后就开始测试,然后有发现当有input元素处于focus状态时,点击提交按钮,无效!!!我再点,好了。。。

  原因是因为blur事件会阻止click事件的执行。。。

    好,我继续改。

  blur事件会阻止click事件的执行,但是不会阻止touch事件,于是想起把click改成tap吧。还真行。不用再点击两次了。

  大功告成,我得意的笑,我真聪明。

  balabala 就上线了。

  一上线发现提交不了了。。。有一定概率出现请求被canceled 。。。

             <a href="<a href=&quo_source title

各种google没找出原因,,问题出在哪里?click是没有问题,换成tap便有问题了,于是乎查了一下 touch event 的执行顺序,大致是这样

  <a href="<a href=&quo_source title

于是我测试 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)” > 终于万事大吉了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/166953.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 互联网圈内的域名大战[通俗易懂]

    互联网圈内的域名大战[通俗易懂]拥有1亿元人民币,我们可以买下一栋超级豪宅,一件绝世珍品,甚至是一家公司。360为如何花这笔钱提供了新思路:他们以1700万美元的天价,从沃达丰手中拿下了梦寐以求的域名360.com。为得到这颗皇冠上的明珠,360和沃达丰进行了长达3年的反复谈判,他们一度开出了1400万美元的高价却仍被对方拒绝。据说,双方是经过周鸿祎的朋友从中斡旋才以这个“相对优惠”的价码最终成交。域名,对于互联

    2022年9月28日
    0
  • c盘扩展卷灰色无法操作的解决办法_win10c盘扩展卷是灰色的

    c盘扩展卷灰色无法操作的解决办法_win10c盘扩展卷是灰色的今天有百事网网友“丅亿页”遇到了这样一个问题:电脑C盘剩余容量太小,在看到百事网的一篇“如何合并磁盘分区windows7调整分区大小方法”文章后,也想将自己C盘系统盘空间扩大。按照上面文章中介绍的步

    2022年8月1日
    6
  • 数组 – 稀疏数组

    一,稀疏数组1.定义稀疏数组可以看做是普通数组的压缩,但是这里说的普通数组是值无效数据量远大于有效数据量的数组形如:00000000000001000000000000200000000000000…

    2022年4月5日
    21
  • 【谷粒商城】框架扩充篇(3/4)「建议收藏」

    【谷粒商城】框架扩充篇(3/4)「建议收藏」1.ELASTICSEARCH1、安装elasticsearchdokcer中安装elasticsearch(1)下载ealasticsearch和kibanadockerpullelasticsearch:7.6.2dockerpullkibana:7.6.2(2)配置mkdir-p/mydata/elasticsearch/configmkdir-p/mydata/elasticsearch/dataecho”http.host:0.0.0.0″>

    2022年5月19日
    39
  • vue取消eslint规范_eslint vue

    vue取消eslint规范_eslint vue新手在学习做vue项目的时候老是遇到一些eslint语法错误的情况,比如下面这种情况:error’xxx’isassignedavaluebutneverusedno-unused-vars其实就是有变量创建了未被引用而已。就这样一个问题就会导致程序无法正常运行,所以很麻烦,现介绍关闭eslint语法校验的方法。在项目目录下找到vue.config.js,如果没有就自己新建一个,在里面添加几个配置项,然后重启项目(npmrunserve)就好了module.exports

    2022年10月8日
    0
  • react路由嵌套

    react路由嵌套在config.js中添加配置项importTwofrom”../pages/Home/Two”importRecommendfrom”../pages/Recommend/Recemmend”;//导入组件letrouters=[{path:”/home”,//路由地址component:Home,//路由模板routes:[//路由嵌套配置路由嵌套不能使用精准匹配

    2022年4月29日
    40

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号