A标签上使用onclick事件,js函数响应成功,单会刷新当前页面陷阱
来源:互联网 发布:淘宝全球购关税税率表 编辑:程序博客网 时间:2024/05/09 21:57
BEGIN;
最近在做html页面时,有时候会遇到以前没遇到的各种奇葩问题。
目前要记载的,就是其中之一。
我们在写链接的时候,即A标签,最普通的写法无非是
<a href='http://www.baidu.com'>百度</a>
(都说百度主页50%是用来测网速的,现在又多了一个用来举例的。。。)。
那么,我们也有很多时候是需要做操作的,如验证文本框内容,成功后再ajax提交,
那么,这个时候我们的html代码有可能会写成这样的:
<a href='#' onclick='test()'>百度</a>
或者干脆直接不写 href,即:
<a onclick='test()'>百度</a>
当我们在测试test()方法的时候,会发现,一切正常,可以alert,可以文本框值神马的,依然可以提交到指定的后台方法,表面上看没有任何问题。
但是可能会出现如下情况:
1、如果你的网页超过了你的电脑分辨率高度,即你滚动了滚动条,然后在中间去点击,因为你的是ajax提交,
你要展示的地方,数据依然刷新,但是,你的网页会重新回到页面的最上方,这个时候,我们可以看到,
浏览器的url地址上的最后面,会多出一个#号!
2、假设JS中有个全局变量获取请求test方法的参数,并提交,样例代码如下:
var gotoPage = 1;<span style="white-space:pre"></span>// 需要跳转的页数,默认为1function mysubmit(gotoPageNo) {<span style="white-space:pre"></span>gotoPage = gotoPageNo;
<span style="white-space:pre"></span>// 验证是否获取到了3
<span style="white-space:pre"></span>alert(gotoPage);<span style="white-space:pre"></span>// 提交<span style="white-space:pre"></span>$('#div').load = 'xxx.do?gotoPage=' + <span style="font-family: 'Microsoft YaHei';">gotoPage;</span>}<a href='#' onclick='mysubmit(3)'>提交</a>
从表面上面,gotoPage获取到传递过来的值,然后进行提交,按道理是gotoPage的确是3。
按照上面代码,做了一个alert,没错,弹出来的gotoPage也的确是3。但是我们再xxx.do的方法里面,拿到的却是1!
问题就出在于,页面刷新了。但是具体是怎么个过程,当时解决问题时没有细研究,
但是的确弹出来的是3,而xxx.do拿到的是1。
解决办法:
当我们再用到A标签的时候,尽可能的不要出现<a href='#' onclick='test()'>这样的情况,
一般,都要写成<a href='javascript:;' onclick='test()'>或者<a href='javascript:void(0);' onclick='test()'>。
就算!你那个A标签没有链接地址,我的建议是,还是不能写成href='#',
因为很有可能会因为不知道为什么页面老是跳到网页的最上面而浪费时间去找原因。
OK,结束。
END;
--- --- --- ---> 点击查看更多最新原创博文<--- --- --- ---
- A标签上使用onclick事件,js函数响应成功,单会刷新当前页面陷阱
- Iscroll.js使用之后页面上面A标签的onclick事件无效了
- <a>标签来响应onclick事件
- 不刷新页面响应超链接a标签的点击事件
- js 如何阻止a标签刷新当前页面
- a标签onClick使用ajax异步刷新时页面整个刷新问题
- a 标签 onclick 事件
- mui中上拉刷新事件a标签中的链接、元素onclick事件在手机上点击不了
- js监听当前页面刷新的事件
- js中使用a标签onclick事件切换图片时显示异常解决办法
- a标签 和 onclick 事件
- a标签onclick事件解析
- js响应刷新页面或者关闭页面事件
- html A标签的onclick事件和href的使用
- html A标签的onclick事件和href的使用
- html A标签的onclick事件和href的使用
- html A标签的onclick事件和href的使用
- a标签的onclick事件和href属性使用
- 开始学习MiniGUI(minigui学习过程及常见问题解答)
- Minigui的深入学习
- 苦苦的啃minigui这个硬骨头
- for minigui!
- 继续学习minigui!!
- A标签上使用onclick事件,js函数响应成功,单会刷新当前页面陷阱
- 深入学习minigui!
- 两天没有过来看了哦
- 五一要加班了哦
- c语言中的结构体常出现的一个小错误
- 老妈的眼睛出了点问题当儿子的心里挺挂心的……
- android图片3D倾斜。如图
- 没有“五一”的生活也许更加充实哦
- Mysql建表与索引使用规范整理