才趟过的一个坑,css造成的Validform表单提交按钮点击无效
发布日期:2021-08-18 00:51:46 浏览次数:1 分类:技术文章

本文共 2290 字,大约阅读时间需要 7 分钟。

  最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦!

  在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已经初步完成啦,下一步自己全套流程测试一下。

  登录-权限-添加数据,嗯PC好像都没问题,能正常运行。继续到手机上测试下,嗯,好像也没问题!也能运行。但感觉好像那点不对劲,静下心想两分钟。

  歇后~ 。再捣鼓一下,好像是出问题了,在我新打开的登录页面中,好像登录按钮第一次点击无效啊!赶紧多测试几下,发现确实是无效,自言自语:“咦,尼玛这是什么鬼情况!!!”,赶紧看下其他页面是不是一样的。

  经过两分钟的观测,爆了个粗口:“卧槽!以前(以前的项目)就好好的,现在给老子出这种鬼问题!!!”,赶紧看看以前的案例,是不是少引用了js文件。

  十分钟后,不对啊,没少啊!难道是js文件引用顺序问题!说道就开始做,按照关系重新排列了一次所有js文件顺序,排完F5,两分钟.....才高兴两分钟,我的心情又变坏了,不是js文件顺序的问题,赶紧想想!还有没有其他可能?火气太大,不行,我要先喝口水再说!

  正喝水中!突然眼睛一睁,好像有种可能,是不是js文件冲突啦!很有可能,说不定是js绑定了其他事件,造成的点击无效!我感觉我自己好像找到了问题的根源。现在是使用万能的排除法的时候啦!马上开始动手,把所有的无关的js注释掉了,只保留了jquery,和Validform.js。继续F5,跑一跑试试,第三次爆粗口:“卧槽!不是这个原因!到底是什么鬼情况啊!啊aa”。

  不行啦!不行啦!肚皮都饿了!先去吃饭再说,回来看看官方文档,论坛社区有没有相关问题!

  有时候啊!程序员真是世界上最积极的动物啦!心中想着这个bug,我以最快的速度囫囵吃完,回到办公室继续捣鼓我的问题!

  看了官方的文档,我尝试着改变了(tiptype)参数值,由4改成1。“咦!瞎猫撞死耗子!居然撞到了,现在能提交了!这真是一种..........”

$("#loginForm").Validform({        tiptype: 1,        ajaxPost: true,        callback: function (e) {            if (e && e.status == "y") {                layer.msg(e.info, { icon: 6 });                window.location.href = "/Project/Index";            } else {                layer.msg(e.info, { icon: 2 });            }        }    });

  不过我不能用他这个参数啊!我要(tiptype=4)才行啊!以前项目都是用的这个都没出问题晒!难道以前的项目中存在什么特殊的配置?问题是人家官网demo都没问题呀!看来我还是没找到问题的根源,又一次的失望,郁闷。这次已经没心情爆粗口了。只有叹气叹气.....

  我像我需要静静,把脑壳冷静下来,才能更敏锐的找出问题!仔细回想一下,到底是什么时候出的问题!最开始不是这样的。

  从我编写完登录页面,当时是正常的!后来我没去改过呀!怎么就出问题了呢?好像我改过公共的css,难道这个东东还受css影响?不得不说,人啊!有时候脑洞大开,什么想法都能产生。不管了,我的性格是有可能就要去尝试,反正多动手不吃亏吗。一试,真的好像是css的问题

  

.Validform_checktip{	/*margin-left:8px;	line-height:20px;	height:20px; 这是影响的css部分*/	overflow:hidden;	color:#999;	font-size:12px;}

  当时css是我为了缩小行宽注释掉的,取消注释,表单提交按钮的功能就正常啦!给大家看下页面对比

  

  请大家仔细看看密码输入框和登录按钮的间距,这种情况下我马上点击登录按钮是没有提交表单的!只是触发了验证,变成下面这个效果

  大家仔细看下,登录按钮和密码框的距离和上图已经不一样了,因为显示了验证成功的文字!这时候再次点击登录按钮,提交了表单

  如果我取消上面css注释的部分!点击登录按钮就会提交表单,页面就变成下图

  仔细观测,密码输入框和登录按钮间距在验证前后都没有发生改变!和css注释是,验证后的距离等同。

  经过我的多次测试,最终得出结果:

    当css注释掉高度时,点击登录按钮,实际上是触发了密码输入框的焦点移除事件!进行了数据验证,而数据验证的结果显示撑大了密码输入行的高度。

    这时候,登录按钮实际上的位置已经不再原来的位置了,故点击无效!有时候在点击登录按钮底部部分,表单一样提交,原因就是登陆按钮坐标还没有超出以前的范围,故响应了点击事件!

  以上就是我本次趟坑趟出来的经验,这种情况很少见。不知道有没有同仁遇到过,嘿嘿嘿

  本人第一次写博客,谢谢大家观看,写的有点啰嗦,还有点小情绪。希望大家多多提提宝贵的意见,踊跃发言

  最后:不知道我的结果对了没有!希望园里的大咖多多指教

    

  

  

  

转载于:https://www.cnblogs.com/dukk/p/7551854.html

转载地址:https://blog.csdn.net/weixin_30872733/article/details/99320568 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:cnblogs 运行代码功能尝试
下一篇:ubuntu和window之间如何共享文件

发表评论

最新留言

逛到本站,mark一下
[***.202.152.39]2024年03月24日 20时28分43秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

整数取反编程_【每日编程185期】数字的补数 2019-04-21
能用别的软件吗_手机软件能用蓝牙传送吗 2019-04-21
为什么图片要2的倍数_为什么宝宝喜欢流“口水”?这种2种原因父母要知道,建议收藏... 2019-04-21
下载了XAMPP怎样打开MYSQL_xampp mysql安装启动 2019-04-21
pdo转mysql_mysql转mysqli或pdo 2019-04-21
mysql如果没有表就创建_mysql – 改变表是否存在或创建如果没有 2019-04-21
ireport连接mysql_ireport 4.5教程之数据源介绍 2019-04-21
mysql多维模型_数据仓库数据库设计方法---关系模型和多维模型比较分析 2019-04-21
局域网聊天程序 java MySQL_java 基于TCP/IP协议的局域网聊天小程序 2019-04-21
r glm 中的p值_假设检验中的P值 2019-04-21
mysql中sql语句结构_MySQL中使用sql语句获得表结构 2019-04-21
如何增加mysql主键约束_mysql修改表时怎么添加主键约束? 2019-04-21
java选择路径窗口_Java实现选择电脑路径的方法 2019-04-21
java 图像渐变_Java基础之在窗口中绘图——渐变填充(GradientApplet 1) 2019-04-21
冒泡排序面向对象java_所谓的面向对象实现的冒泡排序 2019-04-21
proto 客户端 JAVA_Kubernetes官方java客户端之五:proto基本操作 2019-04-21
java编写roguelike_RogueLike地牢生成算法Unity实现 2019-04-21
java ajax 修改数据库数据库数据库_AJAX 自学练习 无刷新提交并修改数据库数据并显... 2019-04-21
java并发编程指南博客_Java并发编程-synchronized指南 2019-04-21
java怎么中断阻塞状态_java并发编程()阻塞方法与中断方法 2019-04-21