【转】HTML中A标签与click事件的前世今生
在动态网页中，常常需要在单击超链接时处理一些数据，而不是跳转一个网页。在这种情况下，通常有以下三种处理方式：
不设置<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 onclick="alert('您单击了第二个超链接')">第1个超链接</a><br>
<a href="http://blog.163.com/alaskan_hu/blog/#" onclick="alert('您单击了第二个超链接')">第2个超链接</a>
<br>
<a href="javascript:alert('您单击了第三个超链接')">第3个超链接</a>
<br>
</body>
</html>
在本例中创建了3个超链接，这3个超链接的处理方式如下所示：
第1个超链接中，没有设置href属性，因此，从图12-11中看起来好像只是一行文字，并且鼠标放在上面的时候，也不会显示小手的形状。因此，很 难让用户知道这是一个可以点击的超链接。但是如果用户单击了该超链接，会弹出一个警告框，而且单击警告框中的【确定】按钮之后，不会跳转到任何URL上。
第2个超链接中，href属性值为"#"，如果单击该超链接，先会执行onclick属性值中的JavaScript，弹出一个警告框。在单击警告框中的【确定】按钮之后，浏览器会自动跳转到当前网页的顶部。
第3个超链接中，直接将JavaScript语句写在href属性值中。在单击该超链接时，可以执行href属性值中的JavaScript语句，而且不会有任何跳转。
【转】HTML中A标签与click事件的前世今生的更多相关文章
- EasyUi中的datagird中a标签的click事件无法触发？（已解决）
***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { f ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- a标签的click事件问题
easy知识点, a标签的click事件和href共存会在执行click事件后触发href里面的链接,如果把href设为空字符串:href="",则会使用当前页面的url作为跳转链 ...
- a标签包着img事件 ie下 a标签的click事件失效
整个大的背景框有个点击事件, 如果标签结构是(详细的css样式略) a{background:green;} <a href=""> <img src=" ...
- JQuery的click,trigger触发a标签的click事件无效的问题分析
今天在做一个手机端webAPP链接下载的时候,给a标签一个下载链接,但是通过 <a id="downFile" download="" href=&quo ...
- jquery中对动态生成的标签响应click事件（二）…与ajax交互使用
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncodin ...
- jquery中对动态生成的标签响应click事件（一）
参考自:http://my.oschina.net/lishixi/blog/31612 <%@ page language="java" contentType=" ...
- ASP。net中如何在一个按钮click事件中调用另一个按钮的click事件
方法一: 直接指定 事件<asp:Button ID="btn1" runat="server" Text="按钮1" onclick ...
- 使用jquery trigger 触发a标签的click事件取代window.open方法
var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32&qu ...
随机推荐
- PHP执行过程
PHP执行过程 任何一种语言的源代码计算机都没有办法直接执行,需要转换成计算机能够识别的机器指令. PHP也是一门高级语言,也需编译(解释) PHP的解析过程: 1.请求源代码,进行词法解析, ...
- ubuntu16.04无法连接无线的问题解决方式以及QQ的安装
0x01 首先我是安装了win10与ubuntu16.04的双系统,不过遇到的问题有启动项与无线连接的问题,今天说一下联网的问题. 连接宽带是正常的,只需要操作sudo pppoeconf 这条命令即 ...
- ssh: connect to host xxx.xxx.xxx.xxx port 22: Connection refused
工具/原料:Ubuntu 在采用scp在不同机器之间进行文件拷贝时出现标题所示的错误,原因可能是: 1.sshd 未启动 2.sshd 未安装 3.防火墙 4需重新启动ssh 服务 查看sshd进程方 ...
- 解决：error: 'Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)'
在使用 deamon@deamon-H55M-S2:/usr/bin$ mysqladmin -u root -p shutdown 关闭MySQL之后试图通过: deamon@deamon-H55M ...
- [翻译][MVC 5 + EF 6] 10：处理并发
原文:Handling Concurrency with the Entity Framework 6 in an ASP.NET MVC 5 Application 1.并发冲突: 当一个用户编辑一 ...
- centos6.3安装openvpn客户端
centos6.3安装openvpn客户端 Centos 默认是没有提供Openvpn的,而且在yum 的源里面也没有openvpn ,如果想使用yum安装的话要首先安装EPEL这个东西.www.2c ...
- jquery鼠标样式
浏览器是有自带的鼠标样式的,如果某些时候为了保持鼠标样式的统一,或者想指定特定的鼠标样式该怎么办呢?那就要使用自定义了,下面有个不错的示例,喜欢的朋友可以参考下 1.浏览器自带的鼠标样式: 2. ...
- DataGridView绘制序号
1.找到RowPostPaint事件 2.写入事件 /// <summary> /// 绘制序号 /// </summary> private void dgvStatemen ...
- mysql查看表结构命令
mysql查看表结构命令 mysql查看表结构命令,如下: desc 表名;show columns from 表名;describe 表名;show create table 表名; use inf ...
- 关于2440的裸跑程序中SD卡读后不能成功写入问题的讨论
问题描述: TQ2440的官方裸跑程序中,对SD卡先进行读操作,然后再写,发现不能程序卡死.倘若对SD卡先写后读,程序可以正常运行,奇哉怪哉? 写数据的关键代码--> while(i < ...