a标签的herf和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>
<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事件的更多相关文章
- 关于IOS下click事件委托失效的解决方案
一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...
- 关于a标签自身的click事件所带来的一些影响
众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- 【转】HTML中A标签与click事件的前世今生
在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页.在这种情况下,通常有以下三种处理方式: 不设置<a>标签的href属性,只设置onclick属性.在这种处理方式下,通 ...
- a标签的click事件问题
easy知识点, a标签的click事件和href共存会在执行click事件后触发href里面的链接,如果把href设为空字符串:href="",则会使用当前页面的url作为跳转链 ...
- EasyUi中的datagird中a标签的click事件无法触发？（已解决）
***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { f ...
- 如何模拟click事件，打开一个a标签链接？
在项目开发过程中,我们经常会碰到通过接口返回一个地址,同时在新的tab页面打开一个网址的情况,最直观的想法就是通过window.open(url)的方式,打开一个新的页面,但是大部分浏览器会遭遇拦截. ...
- jsp中一个标签两种方式绑定两个click事件导致未执行的问题
近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...
- ie6下a标签click事件无法触发加载iframe
ie6下a标签click事件无法触发加载iframe,把a换成span或者别的,就可以了
随机推荐
- AX2012 QTY小数的位数问题
小数的位数 ============================================ A.扩展数据类型Qty的位数(默认为2位)B.单位中的位数(通常PCS为0位)C.扩展数据类型Bo ...
- python 执行execute遇到的问题
1.如下方式去查询无法查询出结果,但直接在数据库查询中去查询是能查询到结果的,郁闷中,花了很久的时间才知道原来是双引号导致的 把:name="%s" 中的%s前后的双引号去掉就对了 ...
- mata属性
声明文档使用的字符编码: <meta charset="utf-8" />声明文档的兼容模式: <meta http-equiv=" ...
- Groovy入门经典 随书重点
1 数值和表达式 1.1数值 整数是Integer类的实例 有小数部分的数值是BigDecimal类的实例 不同于java,没有基础数据类型 一切皆对象的概念重于java 1.2表达式 两个整数的除法 ...
- 作业调度框架 Quartz 学习笔记(三) -- Cron表达式 (转载)
前面两篇说的是简单的触发器(SimpleTrigger) , SimpleTrigger 只能处理简单的事件出发,如果想灵活的进行任务的触发,就要请出 CronTrigger 这个重要人物了. Cro ...
- hadoop机架感知与网络拓扑分析：NetworkTopology和DNSToSwitchMapping
hadoop网络拓扑结构在整个系统中具有很重要的作用,它会影响DataNode的启动(注册).MapTask的分配等等.了解网络拓扑对了解整个hadoop的运行会有很大帮助. 首先通过下面两个图来了解 ...
- Sublime Text 3 中文乱码的解决方法
Sublime Text 3 中文乱码表现如下图: 解决方法很简单,三步搞定: 步骤一: 下载ConvertToUTF8,下载地址:http://pan.baidu.com/s/1gd5SWmB 步骤 ...
- 一眼看懂KMP匹配算法
KMP算法——快速从字符串M(母串)中找出与字符串Z(子串)匹配的子串 例1: 0 1 2 3 4 5 M:a b c a b d Z: a b d BF算法(最一般的算法,也叫“蛮力算法”): 将 ...
- Javascript下拉导航
1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...
- ICEM(2)—机翼翼稍网格绘制
有时我们需要观察翼尖涡,这就需要将机翼全部被网格包围.但是网上比较多的教程都是机翼边缘即为网格边缘,机翼位于网格内部的不多.若是直接将网格拉伸,则会产生结构和非结构网格交错的情况.下面是绘制步骤 1. ...