|
锁定老帖子 主题：解决了一个小问题，希望对大家有帮助
精华帖 (0) :: 良好帖 (0) :: 新手帖 (7) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-12-05
我们经常会用链接<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> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-12-05
最后修改：2008-12-05
<a href="javascript:void(0)" onclick="something()" >test</a>
|
| 返回顶楼 | |
|
发表时间：2008-12-05
谢谢，这一种也可以的。
|
| 返回顶楼 | |
|
发表时间：2008-12-05
achun 写道 <a href="javascript:void(0)" onclick="something()" >test</a>
嗯，这个才是正解． 加#也会乱跳的 |
| 返回顶楼 | |
|
发表时间：2008-12-05
囧，你就不能onclick="something();return false"啊……
javascript:void(0)这种伪协议，少写的好，如果你看过一些web标准的书就知道为什么了。 |
| 返回顶楼 | |
|
发表时间：2008-12-05
笨笨狗 写道
囧，你就不能onclick="something();return false"啊……
javascript:void(0)这种伪协议，少写的好，如果你看过一些web标准的书就知道为什么了。
我这样做的原因是,这样的话,无论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)"这种伪协议了
|
| 返回顶楼 | |
|
发表时间：2008-12-05
最后修改：2008-12-05
感觉发个帖子学到了很多。：）
总结一下，如果在实际应用中确实是要用到<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="#">,而且一直没有发现有 滚动条会跳上去的 问题， 今天才发现有这样的问题，所以才有如上所说。 另外谢谢楼上的各位仁兄们，你们让我学到更多。 |
| 返回顶楼 | |
|
发表时间：2008-12-05
fang9159 写道
感觉发个帖子学到了很多。：）
总结一下，如果在实际应用中确实是要用到<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="#">,而且一直没有发现有 滚动条会跳上去的 问题， 今天才发现有这样的问题，所以才有如上所说。 另外谢谢楼上的各位仁兄们，你们让我学到更多。
你的后两种方法有浏览器兼容性问题,有些浏览器不会产生pointer鼠标指针. |
| 返回顶楼 | |
|
发表时间：2008-12-05
一般通用方法就是这样
<a href="javascript:;" onclick="return false;">test</a> 然后a标签上的事件通过2级DOM事件来添加 |
| 返回顶楼 | |
|
发表时间：2008-12-05
为什么非得要 <a> 标签呢？如果不考虑 SEO，不需要在这个标签上使用特殊的 a:hover 样式，个人觉得没有必要用 <a> 标签
|
| 返回顶楼 | |
