链接当按钮使用问题

 

      1.链接当按钮使用问题

当我们把链接当做按钮使用的时候,比如这样:<a href=="" οnclick="addOneNumber();">+</a>  千万注意了!如果这样写的话,当你点击这个链接的时候,会发送两个请求到后台去,一个是onclick触发的处理函数发送一个AJAX请求,一个是href=“”发送一个刷新本页面的请求!我的本意是只发送一个AJAX请求局部刷新页面即可,我怎么搞都不对,原来是href=""的原因!把href=“”改成href="javascript:void(0)"即可,就是把这个链接失效(刚开始我还以为是浏览器的原因,因为在不同的浏览器有不同的效果,看来不能轻易怀疑浏览器!)

 

2.JS单引号与双引号问题

    当拼接JS字符串的时候,双引号里面一定要是单引号,单引号里面要是双引号。如此循环!不过全部双引号也可以,就是双引号里面的双引号需要转义!这个错误在查看页面源代码的时候看不出来!我那天看了好久,Firefox那个错误控制台报错了,说是语法错误,但是我查看页面源代码的时候,感觉没错,而且的确没错!如果用firebug看的话,就看出来了!

 

 

 

 

 

我们经常会用链接<a> 来代替 <button> 触发onclick事件。
比如<a href="javascript: alert()">测试</a>
这样做出现的结果就是: 执行了alert()后,直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。

那么以前我是怎么做的呢? 我将代码改为<a  href = "#" οnclick="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="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
 
<p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
 
<p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
 
<p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="#" οnclick="alert()">test</a> </p>
  <p>
  <a href="javascript:alert()" >test</a> </p>
  <p>
  <a href="#" οnclick="alert();event.returnValue=false;">test</a> </p>
</BODY>

 

或者写成这样的形式:

<a href="javascript:void(0)" οnclick="something()" >test</a>

这样做的原因是,这样的话,无论onclick是明文写到标签里的,还是用addEvent的,都通用.不用考虑事件模型的问题了.

虽然这个伪协议是被浏览器支持的.不过你说的很有道理.

那其实像LZ这个问题的提出其实是要解决的问题.通常都发生在:

1.一个标签仅仅是要触发onclick行为

2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果

但是IE下a标签必须有href属性才能表现出这些特性.

所以就有了这样的问题.

那解决起来方法大概有

1.不用a标签,设定css或用js来表现

2.用a标签,onclick属性或onclick事件中返回false;

3.用href="javascript:void(0)"这种伪协议了

 

总结一下,如果在实际应用中确实是要用到<a>标签来响应onclick事件的。
那么就建议使用下面三种方法
1.<a href="javascript:void(0)" οnclick="doSomething()">test</a>
2.<a href="" οnclick="doSomething();return false">test</a>
3.<a href="" οnclick="doSomething();event.returnValue=false">test</a>

其实,我发这个帖子的主要目的是,我以前一直都习惯用 <a href="#">,而且一直没有发现有 滚动条会跳上去的 问题, 今天才发现有这样的问题,所以才有如上所说。
但要注意后两种方法有浏览器兼容性问题,有些浏览器不会产生pointer鼠标指针.

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值