html中a标签中的onclick和href的使用-阿里云开发者社区

开发者社区> 技术小阿哥> 正文

html中a标签中的onclick和href的使用

简介:
+关注继续查看
链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接); 
假设链接中同时存在 href 与 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return false 注释掉; 
如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动; 
如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替; 
在按住Shift键的情况下会有所区别。 
今天我遇到的问题,在IE6.0里以href的形式访问不到parentNode。 
尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放 

下面是自己遇到的: 

如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题)。 
<a href="javascirpt:fn(this)"> <a 假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值。 

所以,比较推荐的写法是<a href="javascript:void(0)" 


下面代码则执行了subgo()函数, 

<a href="javascript:void(0)" 

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。 

<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" href="javascript:void(0)" 

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0) 

    href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写:<a href="http://blog.163.com/wb_zhaoyuwei/blog/ javascript:void(0)" onclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协 议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。 

    我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写 false;". 

TabPane的JS源码,由于 

------------------------------------------------------------------------------------------------------------------------------------------ 



至于其他楼说的【IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒绝】因为没有安装IE8,不敢妄下结论。 



------------------------------------------------------------------------------------------------------------------------------------------ 



如果在实际应用中确实是要用到<a>标签来响应 
那么就建议使用下面三种方法 
1.<a href="javascript:void(0)" 
2.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" false">test</a> 
3.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();event.returnValue=false">test</a> 

-------------------------------------------------------------------------------------------------- 

超 级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已 是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构。<a>标记的基本语法结构是: 

<a 
class=type 
id=value 
href=reference 
name=value 
rel=same|next|parent|previous 
rev=value 
target=window 
style=value 
title=title 


onMouseOver=function>连接</a> 
  从标记的语法结构可以看出,在设定一个超级链接时有很多参数可供选择,以实现不同的链接效果,这有点出乎意料吧?! 

   其中class和id选项:用于设定链接点所属的类型和分配的ID号,通常不加以设定。最常用的两个参数是href和name。其中href是 hypertext reference的缩略词,用于设定链接地址。链接地址必须为url地址,如果没有给出具体路径,则默认路径和当前页的路径相同。 链接到的文件也分为几种情况:如果为HTML文件,则在当前浏览器中直接打开;如果为可执行文件(.exe文件),则直接执行或下载,我们提供下载的文件 就是用它的这种特性做的;如果为文本文件如word格式的文件,则在浏览器中打开此文件,并可以进行编辑加工。 

  rel:表示设定链接的关系:rel=same表示待链接的文件与此文件相同,rel=next表示待链接的文件为下一页,rel=parent表示本文件为待链接文件的父文件,rel=previous则表示待链接的文件为上一页。 

  rev:则用于设定反向链接。 

  target:是在采用帧窗口的情况下设定链接到哪一个窗口,还有target="_bank"是表示新开一窗口打开网页。 

  title:用于设定链接点被选到时显示的标题。 

   

   

   

  举几个例子: 

<a href="http://blog.163.com/wb_zhaoyuwei/blog/index.htm">回到主页</a> 
<a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">播放语音文件</a> 
<a href="http://blog.163.com/wb_zhaoyuwei/blog/javascipt.open()">执行对应的程序</a> 
<a herf="document.doc">打开对应的文档进行加工</a> 
  应用技巧 

  1、提供下载文件 

   有不少网友来信问,提供下载的效果怎么做。实际上仍然是做一个超级链接,不过供下载的文件必须上传到网站上。例:有一个“网页技巧”的文件包供下载,文 件名是“homepagejq.zip”且已上传到网站了,则这个链接的代码可以这样写:<a href="http://blog.163.com/wb_zhaoyuwei/blog/homepagejq.zip">点击这里下载“网页 技巧”文件包</a>。 

  2、在新窗口中打开链接的网页 

  设定“target”的值为 “_blank”。例:新开窗口打开网页“aboutme.htm”。产生该效果的代码是:<a href="http://blog.163.com/wb_zhaoyuwei/blog/aboutme.htm" target="_blank">关于我......</a>。 

  3、鼠标移到链接,显示一行说明文字 

   设定“title”参数值,即可获得这种效果。例:当鼠标移到“黄山村夫”这个链接上时,显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的 代码是这样的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/hscf.htm" title="这是一个介绍网页制作技巧的专业网站">黄山村夫</a>。 

  4、鼠标移到一个链接上弹出一个窗口 

   这是设定 href="http://blog.163.com/wb_zhaoyuwei/blog/其它网页.htm" 

  5、链接到本页的指定内容 

  要实现链接到本页的某一部分内容上(也就是 “文件内跳转”),必须用参数name指定链接点的名称。选定一块文本,可以用name参数为其命名,以备 链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候,若只对某部分的内容感兴趣,可以采用跳跃式的阅读方式。其基本格式是: 

<a href="#链接点名称">第二部分</a>第一部分内容...... 
........................................... 
<a name="链接点名称"></a>第二部分实际内容...... 
........................................... 
  这样当你点击“第二部分”这个超级链接后,就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的链接点名称可以随意取,但链接的“href”参数中的链接点名称必须与其一致,不要忘记在前面加上“#”。 

  6、链接到其它页面的指定内容位置 

   方法与上例类似,但在“href”参数中的链接点名称前要加上网页的文件名。例:有两个网页page1.htm和page2.htm ,每页均有两部分内容,现要在page1.htm中制作一个超级链接,按下该链接后将转到page2.htm的第二部分内容上。那么我们可以这样做,首先 在page2.htm第二部分内容开始的地方写上这样一句代码:<a name="链接点名称"></a>;在page1.htm中写上这样一个链接代码:<a href="http://blog.163.com/wb_zhaoyuwei/blog/pagw2.htm#链接点名称">page2 的第二部分内容</a>。 

  7、链接到E_mail 

  点击一个超级链接后,将启动客户机上的电子邮 件管理软件给你写信。例这行代码:<a href="mailto:web@webjx.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接,将自动启动电子 邮件管理软件(如OE)的写信功能,并已把邮件地址加在了收信人的地址栏里了。 

  链接不仅可以以文本作载体,也可以以图象作载体,而且可以以图片的某一部分作载体,且都能实现上述这些效果,方法也相同,所不同只是载体,也就是链接的两对方括号中间的那部分,所以不再另举例了。



本文转自 jerry1111111 51CTO博客,原文链接:http://blog.51cto.com/jerry12356/1612174,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用容器编排工具docker swarm安装clickhouse多机集群
1.首先需要安装docker最新版,docker 目前自带swarm容器编排工具 2.选中一台机器作为master,执行命令sudo docker  swarm init [options] 3,再需要加入集群的集群上执行此命令   4.
3202 0
CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)
网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用。
905 0
解决sitemesh3装饰页面不能使用freemarker标签问题
如题,这个问题其实在sitemesh2中已经很好的解决了,不过在sitemesh3中可能没有解决,所以要自己写代码解决了,下面我先讲下sitemesh2是如何解决的: sitemesh-freemarker com.
888 0
去掉A标签的虚线框
outline是css3的一个属性,用的很少。 声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。 outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。
661 0
13694
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载