a标签中的onclick和href的使用

onclick和href

连接的 onclick 事件被先执行，其次是 href 属性下的动做（页面跳转，或 javascript 伪连接）； 

假设连接中同时存在 href 与 onclick，若是想让 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 onclick="fn(this)"> 假定咱们有个fn方法，须要取到这个元素，第一个方法传入的this是空值。 

因此，比较推荐的写法是<a href="javascript:void(0)" onclick="fn(this)"> 


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

<a href="javascript:void(0)" onclick="subgo()">点我</a> 

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

<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。 

实际上 #包含了一个位置信息默认的锚是#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 ，通常是这样写onclick="xxx();return false;". 

TabPane的JS源码，因为onclick没有返回FALSE，当IFRMAE中关闭TABPANE时会致使href执行，页面显示有问题。解决办法就是将下面代码复制到使用TAB的JSP中。 


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


若是在实际应用中确实是要用到<a>标签来响应onclick事件的。 
那么就建议使用下面四种方法 
1.<a href="javascript:void(0)" onclick="doSomething()">test</a> 
2.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return 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 onclick＝function onmouseout＝function 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：用于设定连接点被选到时显示的标题。 

　　onclick：对应于一个事件，当连接点被点击后将触发这个事件，执行对应的子程序。 

　　onmouseover：与onclick相似，对应的事件在鼠标移到连接点上时被触发。 

　　onmouseout：对应的事件在鼠标移出镇接点后被触发。 

　　举几个例子： 

<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>

应用技巧 

　　一、提供下载文件  　　有很多网友来信问，提供下载的效果怎么作。实际上仍然是作一个超级连接，不过供下载的文件必须上传到网站上。例：有一个“网页技巧”的文件包供下载，文件名是“homepagejq.zip”且已上传到网站了，则这个连接的代码能够这样写：<a href="http://blog.163.com/wb_zhaoyuwei/blog/homepagejq.zip">点击这里下载“网页技巧”文件包</a>。  　　二、在新窗口中打开连接的网页  　　设定“target”的值为“_blank”。例：新开窗口打开网页“aboutme.htm”。产生该效果的代码是：<a href="http://blog.163.com/wb_zhaoyuwei/blog/aboutme.htm" target="_blank">关于我......</a>。  　　三、鼠标移到连接，显示一行说明文字  　　设定“title”参数值，便可得到这种效果。例：当鼠标移到“黄山村夫”这个连接上时，显示说明“这是一个介绍网页制做技巧的专业网站”。这个连接的代码是这样的：<a href="http://blog.163.com/wb_zhaoyuwei/blog/hscf.htm" title="这是一个介绍网页制做技巧的专业网站">黄山村夫</a>。  　　四、鼠标移到一个连接上弹出一个窗口  　　这是设定onmouseover参数得到的效果。例：当鼠标移到一个连接上，弹出一个窗口并在窗口中显示“鼠标悬停效果演示！”。这个连接的代码是这样的：<a href="http://blog.163.com/wb_zhaoyuwei/blog/其它网页.htm" onmouseover="alert('鼠标悬停效果演示！')">连接</a>。用相似的方法能够制做当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。  　　五、连接到本页的指定内容  　　要实现连接到本页的某一部份内容上（也就是“文件内跳转”），必须用参数name指定连接点的名称。选定一块文本，能够用name参数为其命名，以备连接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候，若只对某部分的内容感兴趣，能够采用跳跃式的阅读方式。其基本格式是：  <a href＝"＃连接点名称">第二部分</a>第一部份内容......  ...........................................  <a name＝"连接点名称"></a>第二部分实际内容......  ...........................................  　　这样当你点击“第二部分”这个超级连接后，就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的连接点名称能够随意取，但连接的“href”参数中的连接点名称必须与其一致，不要忘记在前面加上“#”。  　　六、连接到其它页面的指定内容位置  　　方法与上例相似，但在“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>。  　　七、连接到E_mail  　　点击一个超级连接后，将启动客户机上的电子邮件管理软件给你写信。例这行代码：<a href="mailto:web@webjx.com">请给我写信</a>。一旦你点击了“请给我写信”这个连接，将自动启动电子邮件管理软件（如OE）的写信功能，并已把邮件地址加在了收信人的地址栏里了。  　　连接不只能够以文本做载体，也能够以图象做载体，并且能够以图片的某一部分做载体，且都能实现上述这些效果，方法也相同，所不一样只是载体，也就是连接的两对方括号中间的那部分，因此再也不另举例了。