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

不设置<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>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
<scripttype="text/javascript"language="javascript">
<!--
//多添加几个换行,让效果明显
for(var i=0;i<100;i++)
{
document.write("<br>");
}
-->
</script>
</head>
<body>
<aonclick="alert('您单击了第二个超链接')">第1个超链接</a><br>
<ahref="http://blog.163.com/alaskan_hu/blog/#"onclick="alert('您单击了第二个超链接')">第2个超链接</a>
<br>
<ahref="javascript:alert('您单击了第三个超链接')">第3个超链接</a>
<br>
</body>
</html>

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

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

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

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

由于onclick先于herf执行,所以可以利用这个执行顺序,实现页面迁移的控制,即满足一定条件的情况下才迁移页面。

把上面代码修改成如下代码。onclick中调用的判断方法必须返回true/false,同时必须用return把该判断方法的返回值

传给为onclick事件,这样当判断方法返回false时(即onclick="javascript:return false"), 则herf不执行,页面就

不进行迁移;若判断方法返回true,则herf执行,页面进行迁移。若onclick中的判断方法前不加return,则无法控制

herf的执行,无论判断方法返回true或false,herf都执行迁移页面。

a标签的herf和click事件的更多相关文章

  1. 关于IOS下click事件委托失效的解决方案

    一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

  2. 关于a标签自身的click事件所带来的一些影响

    众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...

  3. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  4. 【转】HTML中A标签与click事件的前世今生

    在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页.在这种情况下,通常有以下三种处理方式: 不设置<a>标签的href属性,只设置onclick属性.在这种处理方式下,通 ...

  5. a标签的click事件问题

    easy知识点, a标签的click事件和href共存会在执行click事件后触发href里面的链接,如果把href设为空字符串:href="",则会使用当前页面的url作为跳转链 ...

  6. EasyUi中的datagird中a标签的click事件无法触发?(已解决)

    ***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { f ...

  7. 如何模拟click事件,打开一个a标签链接?

    在项目开发过程中,我们经常会碰到通过接口返回一个地址,同时在新的tab页面打开一个网址的情况,最直观的想法就是通过window.open(url)的方式,打开一个新的页面,但是大部分浏览器会遭遇拦截. ...

  8. jsp中一个标签两种方式绑定两个click事件导致未执行的问题

    近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...

  9. ie6下a标签click事件无法触发加载iframe

    ie6下a标签click事件无法触发加载iframe,把a换成span或者别的,就可以了

随机推荐

  1. SAP 采购订单收货时报错:对于采购订单xxxx无收货可能

    因为这个问题查了挺长时间,所以写在博客里记录下. 报错详细: 每个公司的配置不同,我公司遇到的这个问题原因是这里的确认控制是从信息记录带过来的,问题解决方法是,修改下确认控制的选项: 修改确认控制的后 ...

  2. DataTable筛选出现异常

    异常详细信息: System.ArgumentException: 在 Range 对象中,Min (37)必须小于或等于 max (-1). 解决方法:转化字段类型为int 再次出现问题:HH> ...

  3. SPSS数据分析—典型相关分析

    我们已经知道,两个随机变量间的相关关系可以用简单相关系数表示,一个随机变量和多个随机变量的相关关系可以用复相关系数表示,而如果需要研究多个随机变量和多个随机变量间的相关关系,则需要使用典型相关分析. ...

  4. css 表格

    1.给元素的display属性添加为以下值 table : <table> table-caption :<caption> table-cell : <td> t ...

  5. 重写TextField Rect 改变显示位置

    很简单很常用的一些东西,希望给需要的人帮助. 效果图如下: 自定义textField init() { super.init(frame: CGRect(x: , y: , width: yourWi ...

  6. poj1753 Flip Game

    题意:4*4的正方形,每个格子有黑白两面,翻转格子使得4*4个格子显示全黑或全白,翻转要求:选中的那个格子,以及其上下左右相邻的格子(如果存在)要同时翻转.输出最小的达到要求的翻转次数或者Imposs ...

  7. android studio异常关机后出现的问题

      使用android studio 时突然卡死. 重启后所有项目都打不开,提示workspace.xml  Error:content is not allowed in prolog 打开work ...

  8. MySQL ERROR 1005: Can't create table (errno: 150)的错误解决办法

    在mysql 中建立引用约束的时候会出现MySQL ERROR 1005: Can't create table (errno: 150)的错误信息结果是不能建立 引用约束. 出现问题的大致情况 1. ...

  9. 用orb-slam2跑RGB-D Example中的TUM Dataset

    链接在此:https://github.com/raulmur/ORB_SLAM2 1.按照要求下载数据集,我下载的是rgbd_dataset_freiburg2_pioneer_360,将其解压到你 ...

  10. C#读取Excel文件

    //excel模板的路径 string strSource = Application.StartupPath + "\\" + "ExcelTemplet" ...