<a>标签深入讲解

标签中 href 和 onclick 的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别

2017年08月18日 00:06:24 chunlynn 阅读数：12009

所属专栏： 深入浅出JavaScript

 

版权声明：本文为博主（chunlynn）原创文章，转载请注明出处 https://blog.csdn.net/chenchunlin526/article/details/77346049

<a>标签中href属性动作和onclick事件的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别

 

 

一、href 与 onclick 的区别

 

我以前在写<a>标签的 href 和 onclick 一直很随意，后来出过几次问题，以后才开始重视这个问题：

首先摘录一篇文档：

在Javascript中void是一个操作符，该操作符指定要计算一个表达式，但是不返回值。

void 操作符用法格式如下：

javascript:void(expression) 

javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。 (实现版本 Navigator 3.0)

 

你可以使用 void 操作符指定超链接。表达式会被计算，但是不会把当前文档处装入任何内容。

 

下面的代码创建了一个超链接，当用户点击以后不会发生任何事。当用点击户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

<a href="javascript:void(0);">单击此处什么也不会发生</a>

下面的代码创建了一个超级链接，用户单击时会提交表单。

<a href="javascript:void(document.form.submit());">单此处提交表单</a>

 

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

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

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

 

<a href="#" 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="javascript:void(0);" onclick="xxx();">yyy</a>

尽量不要用javascript:协议做为a的href属性，因为这种方法在复杂环境，有时会产生奇怪的问题，有时会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

 

如果链接中同时有，href 属性函数和 onclick 事件函数，那到底执行那个呢？

<a href="javascript:subgo2();" onclick="subgo();">点我</a>

subgo()与subgo2()执行顺序是怎样的？

 

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

 

假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值，一般是这样写onclick="xxx();return false;" 。

<a href="javascript:subgo2();" onclick="subgo(); return false;">点我</a>

上面的链接只执行onclick事件函数，href 里的 subgo2()不执行。

如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 #，这可以防止不必要的页面跳动； 

如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替； 

二、<a>标签里的函数事件写法的实战建议

 

如果在实际应用中确实是要用到<a>标签来响应onclick事件的，

那么就建议使用下面三种方法 

<a href="javascript:void(0);" onclick="doSomething();">test</a> 

<a href="http://xxx/findname/" onclick="doSomething();return false">test</a> 

<a href="http://xxx/findname/" onclick="doSomething();event.returnValue=false">test</a> 

方法后面的分号";"，可加可不加，一般推荐加上。

 

三、<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="_blank"是表示新开一窗口打开网页。 

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

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

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

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

 

举几个例子：

<a href="http://xxx/blog/index.htm">回到主页</a> 

<a href="http://xxx/blog/sound.wav">播放语音文件</a> 

<a href="http://xxx/blog/javascipt.open()">执行对应的程序</a> 

<a herf="document.doc">打开对应的文档进行加工</a> 

应用技巧 

1、提供下载文件 

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

 

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

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

 

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

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

 

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

这是设定onmouseover参数获得的效果。例：当鼠标移到一个链接上，弹出一个窗口并在窗口中显示“鼠标悬停效果演示！”。这个链接的代码是这样的：<a href="http://xxx/blog/其它网页.htm" onmouseover="alert('鼠标悬停效果演示！')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。 

 

5、链接到本页的指定内容 (可以用于tab页的跳转）

要实现链接到本页的某一部分内容上（也就是“文件内跳转”），必须用参数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://xxx/blog/page2.htm#链接点名称">page2 的第二部分内容</a>

 

7、链接到E_mail 

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

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

 

例子：

用CheckBox控件时，想实现在每个checkbox后再加链接的功能，点链接实现一些功能之外，还要把checkbox选中。

<input type="checkbox" name="chk" id="chkid">

<label for="chkid">选中它

    <a href="javascript:void(0);" onclick="this.parentNode.click();">[label中的链接]</a>

</label>

最后用parentNode来实现的。

四、 href="javascript:xxx(this);"和onclick="xxx(this);"的区别

 

正确的做法：在onclick的方法中传递this参数，将当前a标签对象传递给方法。即使用onclick="xxx(this);"方法。

 

想传递当前对象给一个函数，于是就将这个URL写成"javascript:shoControlSidebar(this);"，可是结果发现

这并不可行，传递过去的参数是一个对象，但是却得不到任何其他信息。我想得到的是innerText，而这个this并非

指向它所在的a标签。 

 

这是<a href="javascript:shoControlSidebar(this);">

和<a href="javascript:void(0);" onclick="shoControlSidebar(this);">

不同的地方。 

 

当使用 onclick="shoControlSidebar(this);" 的时候，解释器会给他包装一个匿名函数，变成了： 

代码如下:

a.onclick = function anonymous() { 

    shoControlSidebar(this); 

}

 

这个this指的就是a这个对象，而使用href的方式时，由于是一个地址，这个this就无处可指了。 

代码如下：

<a href="javascript:void(0);" onclick="test(this);">A标签测试</a> 

 

想获取A 中的innerHTML 

如果href="test(this);" 不但获取不到值，而且程序将退出，href引向不对。 正确获取当前标签对象代码如下：

JS实战代码：

//js的方法中参数不能再写成test(this)了，因为this有特定的含义，所以写成test(obj)才正确

function test(obj){

    //obj就是onclick="test(this)"中this传过来的，this指的就是页面中点击的a标签对象，

    //然后通过HTML的DOM属性parentNode获取a标签的父节点，不断往上获取到最外层tr的父节点，然后进行下一步的其他事件操作了。

    var node = obj.parentNode.parentNode.parentNode.parentNode;

    $(node).find("tr[class='parents']").find("input[type='checkbox']").prop("checked",'true');

    node.parentNode.removeChild(node);

    alert(obj); 

    //js 

    alert(obj.innerHTML); 

    //jquery 

    alert($(obj).html()); 

}

全文完。