给超链接加onclick事件

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

不设置<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进行加载。

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

 

 
图12-11  sample11.htm的
运行结果

在本例中创建了3个超链接,这3个超链接的处理方式如下所示:

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

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

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

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

注意:警告函数可以换成其他函数,例如Javascript弹出新窗口。window.open ("page.aspx", "newwindow", "height=100, width=400,toolbar =no, menubar=no,scrollbars=no, resizable=no, location=no, status=no");

window.open 弹出新窗口的命令;
page.aspxs弹出窗口的文件名;
newwindow弹出窗口的名字(不是文件名),非必须,可用空代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no
是否显示工具栏,yes为显示;
menubar,scrollbars
表示菜单栏和滚动栏。
resizable=no
是否允许改变窗口大小,yes为允许;
location=no
是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值