我们经常会用链接<a> 来代替 <button> 触发onclick事件。 
比如<a href="javascript: alert()">测试</a> 
这样做出现的结果就是: 执行了alert()后,直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。 
那么以前我是怎么做的呢? 我将代码改为<a  href = "#" onclick="alert()">,这样就不会出现上述的问题了,这个是通过对href属性的了解,只要赋给href=“#”,那么它便不会跳到空页面。 我本以为这样的问题已经解决了, 
想不到这种写法也有个问题,就是当页面出现垂直滚动条的时候,比如你的链接是在页面最底端,你需要将滚动条拉下才能看到此链接,你点击链接,就会先执行alert(),这个时候滚动条会自动拉上去到页面顶端,这给使用系统的客户造成了很大的不方便,由于页面自动往顶端跳,用户又要下拉滚动条来操作。这个说明执行了alert()方法后,浏览器自身也执行了自己的方法。 
这样考虑之后,现在的做法是 <a href="" onclick = "alert();event.returnValue=false"/>,浏览器也是要响应这个事件,那么我们将这个事件停止传播了,自然也就没上面的问题了,当然event.returnValue只是IE的特有,如果要兼容firefox,mozilla ,可能需要考虑兼容性的编码了,但这不是表达的重点. 
所以在平时的页面设计中,最好都是用button来响应onclick事件,如果有涉及到链接的,希望我这种做法能给大家带来帮助。 
语言表达有限,如果觉得写得不太清楚的,请大家运行下面的例子,最后三个链接就是我刚刚讲的三种情况,此例子在IE6.0是通过的。 
<BODY> 
<p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  
<p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  
<p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  
<p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="#" onclick="alert()">test</a> </p> 
  <p> 
  <a href="javascript:alert()" >test</a> </p> 
  <p> 
  <a href="#" onclick="alert();event.returnValue=false;">test</a> </p> 
</BODY> 
 
其他人回答:
<a href="javascript:void(0)" onclick="something()" >test</a> 是正解,加#也会乱跳的
囧,你就不能onclick="something();return false"啊……
javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。
总结一下,如果在实际应用中确实是要用到<a>标签来响应onclick事件的。 
那么就建议使用下面三种方法 
1.<a href="javascript:void(0)" onclick="doSomething()">test</a> 
2.<a href="" onclick="doSomething();return false">test</a> 
3.<a href="" onclick="doSomething();event.returnValue=false">test</a> 
其实,我发这个帖子的主要目的是,我以前一直都习惯用 <a href="#">,而且一直没有发现有 滚动条会跳上去的 问题, 今天才发现有这样的问题,所以才有如上所说。 
 
下一篇:23种css图片修饰
相关新闻
- 小程序登录流程图理解 2020-08-18
- 在C#中获取web.config中的配置信息 2021-08-23
- 小程序open-data头像样式 2021-04-10
- 小程序rich-text 富文本解析图片过大和图片路径的问题 2020-11-25
- C#中去掉字符串的最后一个字符 2020-11-23
 
                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                 
                                                
 
                        
                    
