解决了一个小问题，希望对大家有帮助

fang9159

浏览: 48119 次
性别:
来自: 湖北

最近访客更多访客>>

liumingwei2009

limars

Navee

suziwen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前台技术(js,css,html,ajax)

JavaScript IE 浏览器 jQuery CSS

我们经常会用链接<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>

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 


<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 


<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 


<a href="#" onclick="alert()">test</a> 

<a href="#" onclick="alert()">test</a> 

<a href="javascript:alert()" >test</a> 

<a href="#" onclick="alert();event.returnValue=false;">test</a> 
</BODY>

分享到：

WebfxLoadTree树型的性能问题（一) | 使用jconsole的疑惑

2008-12-05 11:44
浏览 1821
评论(35)
论坛回复 / 浏览 (35 / 15117)
分类:Web前端
查看更多

35 楼 swain 2009-01-07

<a href="#@" onclick="doSomething()">test</a> 即可

34 楼 hanjs 2008-12-29

这个问题我也遇到过，有的时候点击一个超链接执行完代码后还会调整到一个空页面（如果有控件的页面），我都是用
<a href="javascript:" onclick="alert();">test</a>
来处理的

33 楼 xbmujfly 2008-12-19

用#的话，等于给页面给了新Hash，后退按钮可能失效，所以还是慎重一些呀！

32 楼 walkman 2008-12-18

achun 写道

<a href="javascript:;" onclick="something()" >test</a>

这才是王道呵呵

31 楼 wl7226089 2008-12-17

今天做到才发现

<a target="_parent" href="javascript:dosomething('11')">$city.name</a>

这种最好

30 楼 ShingU 2008-12-17

achun 写道

一般也是这么做的。

29 楼 saintlu 2008-12-17

这个很常见的问题，但是很多人还不知道。

28 楼 ulliang 2008-12-12

也可以这么写<a href="#none" onclick="somefunction();"></a>

27 楼 lifesinger 2008-12-11

rmn190 写道

笨笨狗写道

囧，你就不能onclick="something();return false"啊……

javascript:void(0)这种伪协议，少写的好，如果你看过一些web标准的书就知道为什么了。

你提到的伪协议有什么不好的地方? 现在我们项目中主要是用这种.

在缺乏js支持的浏览器上，伪协议不可用
另外，对于习惯自己控制打开行为的用户（比如鼠标中键在新窗口中打开），这部分用户来困惑

26 楼 maomao113 2008-12-10

<a href="javascript://" onclick="something()" >test</a>也可以的嘛

25 楼 maomao113 2008-12-10

<a href="javascript://onclick="something()" >test</a>也可以的嘛

24 楼 rmn190 2008-12-10

笨笨狗写道

囧，你就不能onclick="something();return false"啊……

javascript:void(0)这种伪协议，少写的好，如果你看过一些web标准的书就知道为什么了。

你提到的伪协议有什么不好的地方? 现在我们项目中主要是用这种.

23 楼我佛山人 2008-12-10

在href里写js绝对不是好主意

22 楼 srdrm 2008-12-09

return false 比较好.

如果在 href 里加 javascript 在这样的情况下有问题:

浏览器是 ie6, ie7就没问题, IE6并且打开了个模态对话框(非模态的没试过), 对话框页面里有用到 <a href="javascript 这样形式的话, 点击就会弹出新窗口. 因此这样的情况是不能用的. 不过如果在 onclick里 return false 了 href 就不会执行啦. 因此建议使用 onclick 方式哦.再次声明, 此情况只是 ie6下

21 楼 jsifa 2008-12-09

20 楼 vtsuper 2008-12-08

有些時候非用a不可...因為IE6只支援a:hover

19 楼 lobbychmd 2008-12-08

jQuery:
$('a').click(function(data){xxx; return false;});

或者 event.preventDefault() ,这个好像就是浏览器提供的方法嘛

18 楼 dch1287 2008-12-07

<span style="cursor:pointer" onclick="foo()">Click Me!</span>

17 楼 lifesinger 2008-12-07

挺有意思，我的一些思考： <a href='http://lifesinger.org/blog/?p=856'>http://lifesinger.org/blog/?p=856</a> 
<div class='quote_title'>fang9159 写道</div>
<div class='quote_div'>我们经常会用链接<a> 来代替 <button> 触发onclick事件。 比如<a href="javascript: alert()">测试</a> 这样做出现的结果就是：　执行了alert()后，直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理，所以就会先执行我们自己定义的方法，接着再运行它自身的方法（跳转的方法）。 ... </div>

16 楼 sunarrow 2008-12-07

<a href="javascript:alert('test')">test</a>
是不会打开新窗口的，但是如果：
<a href="javascript:alert('test')" target="_blank">test</a>
就会打开新窗口了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论