给超链接加onclick事件

柔情只为你懂 2022-06-10 11:23 387阅读 0赞

在动态网页中，常常需要在单击超链接时处理一些数据，而不是跳转一个网页。在这种情况下，通常有以下三种处理方式：

不设置<a>标签的href属性，只设置onclick属性。在这种处理方式下，通常超链接文本会和正文的文本以相同的形式出现，即不会有默认的下划线。当鼠标放在超链接上也不会显示小手的形状（除非为该超链接设置了CSS）。因此，用户很难知道这是一个可以点击的超链接。

将<a>标签的href属性值设置为"\#"，并设置onclick属性。在这种处理方式下，用户可以很明显地看出哪些文字是超链接。在单击该超链接时，也可以执行onclick属性值中的JavaScript语句，并且不会跳转网页。但是，由于href的属性值为"\#"，浏览器会自动跳转到当前网页的顶部。如果当前网页内容比较多，浏览器窗口出现下拉滚动条时，可以很明显地看到跳转，而这种跳转往往不是网页设计者的          本意。

在没有为<a>标签设置onclick属性时，如果单击了该超链接，浏览器会加载href属性中的URL。如果href属性值并不是一个URL，而是一个JavaScript语句的话，那么浏览器就会执行该语句。因此，可以直接将JavaScript语句写在<a>标签的href属性值中，让href属性代替onclick属性。在这种处理方式下，既可以响应click事件，又可以不让网页跳转。

在<a>标签的href属性值中添加JavaScript语句之前，必须要先使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。否则，浏览器会将href属性值中的JavaScript语句当成是URL进行加载。请看代码清单，注意加粗的文字。

代码清单  在超链接中使用事件

<table style="width:400px"> 
 <tbody> 
  <tr> 
   <td> <pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;在超链接中使用事件&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html;charset=gb2312"&gt;
&lt;script type="text/javascript" language="javascript"&gt;
&lt;!--
//多添加几个换行，让效果明显
for (var i=0;i&lt;100;i++)
{
document.write("&lt;br&gt;");
}
--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a οnclick="alert('您单击了第二个超链接')"&gt;第1个超链接&lt;/a&gt;&lt;br&gt;
&lt;a href="#" οnclick="alert('您单击了第二个超链接')"&gt;第2个超链接&lt;/a&gt;
&lt;br&gt;
&lt;a href="javascript:alert('您单击了第三个超链接')"&gt;第3个超链接&lt;/a&gt;
&lt;br&gt;
&lt;/body&gt;
&lt;/html&gt;</pre> </td> 
  </tr> 
 </tbody> 
</table>

在本例中创建了3个超链接，这3个超链接的处理方式如下所示：  
第1个超链接中，没有设置href属性，因此，看起来好像只是一行文字，并且鼠标放在上面的时候，也不会显示小手的形状。因此，很难让用户知道这是一个可以点击的超链接。但是如果用户单击了该超链接，会弹出一个警告框，而且单击警告框中的【确定】按钮之后，不会跳转到任何URL上。在本例中创建了3个超链接，这3个超链接的处理方式如下所示：

第2个超链接中，href属性值为"\#"，如果单击该超链接，先会执行onclick属性值中的JavaScript，弹出一个警告框。在单击警告框中的【确定】按钮之后，浏览器会自动跳转到当前网页的顶部。

第3个超链接中，直接将JavaScript语句写在href属性值中。在单击该超链接时，可以执行href属性值中的JavaScript语句，而且不会有任何跳转。

读者可以自己运行该文件查看效果。