A标签上使用onclick事件，js函数响应成功，单会刷新当前页面陷阱

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>// 需要跳转的页数，默认为1

function 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='#' οnclick='test()'>这样的情况，

一般，都要写成<a href='javascript:;' οnclick='test()'>或者<a href='javascript:void(0);' οnclick='test()'>。

就算！你那个A标签没有链接地址，我的建议是，还是不能写成href='#'，

因为很有可能会因为不知道为什么页面老是跳到网页的最上面而浪费时间去找原因。

OK，结束。

END;

--- --- --- ---> 点击查看更多最新原创博文<--- --- --- ---

技术交流

巴特西

A标签上使用onclick事件，js函数响应成功，单会刷新当前页面陷阱

最新文章

热门文章