我们经常会用链接<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>
分享到:
相关推荐
这是我平时积攒的js写的解决共同问题的一些方法,希望对大家有帮助
这是我整理的一点资料,对解决电脑运行速度慢的问题有些帮助,希望对大家有用!
进攻大家参考,文中列出的都是大家常见的问题,虽然不大,但是也给大家的工作带来很大的烦恼,希望可以帮助大家
这是我在中软培训过程中制作的一个项目,这个项目包含了一个企业级项目包括的一切文档,都有规范的说明和详细的解释,代码是经过哪些老师的知道写的 没有任何框架只是严格按照MVC架构自己写的JSP...希望对大家有帮助。
Ajax的学习心得,希望对大家有帮助;这里归纳了一些常见的问题已经解决方法。
昨天看见一位网友需要解决一些关于AJAX的FORM提交的问题,现在把一个实例贴出来,希望对广大爱好者有帮助。
在做网站时会遇到许多问题,这里主要解决上传文件的方法以及步骤,希望能对大家有所帮助。
以上所述是小编给大家介绍的解决微信小程序调用moveToLocation失效问题【超简单】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持! 如果你...
ADAMS教程,非常不错的一个培训教程,希望能帮助初学者解决问题
用蛮力法实现的凸包问题解决方案 通过循环来实现求多边形的凸点,从而达到解决问题的目的
这是一个用PSO算法解决背包问题的很不错的matlab源码,希望对大家有帮助
以上这篇laravel 解决后端无法获取到前端Post过来的值问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 您可能感兴趣的文章:解决laravel 表单提交-POST 异常的问题详解...
今天小编就为大家分享一篇解决layui的input独占一行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
近正在做一个项目,其中遇到了一个问题是java与.NET之间的...虽然找到了原因,但是网上关于这个问题的答案也是百家争鸣,在这里给出源代码,希望对大家有帮助。 首先是客户端的java代码(这是比较简单的部分) im
鸽巢原理【演示如何使用鸽巢原理来解决一个问题(超详细)简介】 内容概要: 本文为初学者提供了一个全面的学习指南,通过通俗易懂的语言和详细的代码注释,介绍了鸽巢原理及其在解决实际问题中的应用。文章以小学生...
关于微信小程序开发解决方案聊过的已经很多了,今天夏日葵电商将小程序开发的常见问题总结成了一个小合集,希望对大家有所帮助。 1.小程序注册数量 企业、政府、媒体及其他组织主体可以注册50个小程序,个体户和个人...
本资源包含了相关电脑故障的解决以及电脑问题的描述
解决tomcat中文乱码问题,有详细的解释说明,希望对需要的人有所帮助