文档章节

html A标签的onclick事件和href的使用

岳静
 岳静
发布于 2012/07/20 15:30
字数 519
阅读 14498
收藏 4

   下面是测试先执行onclick事件还是先执行href,以下为代码:

<a href="javascript:alert(2);" onclick="alert(1);">1先出来是onclick,2先出来是href</a>
  结果在IE、Firefox、Chrome都是先执行的onclick事件,在项目中我们尽量不要同时使用这两种方式。

  A标签的写法

       我们比较熟悉的链接<a>标签写法有以下3种:

       1.<a href="链接地址" ></a>

       或者

       2.<a href="#" onclick="触发一个事件的函数"></a>

       或者

       3.<a href="javascript:void(0);" onclick="触发一个事件的函数"></a>

       下面开始说一下不同浏览器中<a>标签的兼容性。

       对于firefox 而言,3种写法都是可以的,基本没有什么区别。

       而对于IE浏览器或者IE内核的浏览器而言则不同:这不同主要体现在第2和3这二种写法上。

       先说一下第3种IE内核有时候会不认  href="javascript:void(0);" 因而触发不了事件函数,导致点击没有任何反应。

       那为什么会这样呢?

       原因是这样的:IE内核的浏览器,识别<a>标签的时候,先去找  href  属性,并且先执行href中的链接或者函数,如果不识别就不做任何反应[IE最新版已经修改这个问题了]。

       解决方法就是尽量不用这个 href="javascript:void(0);" 的属性。

       然后第2种,这个不同主要体现在主页面嵌入iframe的时候,如果你的<a >标签中的 “href” 属性为 “#”的话,你点击链接时,页面会自动的滚动,直到iframe的顶部成为当前窗口的最顶部,解决这个问题的方法:

       把<a>换成<span >或者别的标签 (在不影响样式的前提下)。

注意:尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

本文转载自:http://www.suyunyou.com/aid1658.html

岳静

岳静

粉丝 45
博文 19
码字总数 8678
作品 0
深圳
高级程序员
私信 提问
A标签触发onclick事件而不跳转的多种解决方法

A标签触发onclick事件而不跳转的多种解决方法 一个标签仅仅是要触发onclick行为,遇到了A标签触发onclick事件时不执行跳转: 在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触...

风中帆
2015/10/23
1K
0
伪协议

因为没有href连接所以没有下划线超链接标签 fn函数被调用 fn函数被调用 fn函数被调用 onlick="show1(this)" 1.单击按钮 中把href设置为一个javascript协议,是为了防止a的默认操作进行http跳...

ITCHN
2016/12/22
54
0
a href=javascript:void(0)在ie6下可能会有问题

在购物页面的“立即购买”按钮是用a标签来做的,设置了href="javascript:void(0);",同时在a上面添加了onclick事件,目的是在点击之后处理Cookies并跳转到订单页面。反复测试发现 ie6下没有跳...

gaopeng8
2014/03/24
169
0
E6浏览器中window.location.href无效解决办法

IE6下window.location.href="www.baidu.com"无法打开,改为window.location.href="http://www.baidu.com" 问题解决。 原因:IE6下window.location.href值必须写上完整的地址,不能使用相对地......

山海经
2014/10/27
681
0
Web开发技巧:使用自定义数据属性创建弹出窗口

在开发web应用时,有时会用JavaScript获取文档之外的信息,某些情况下,我们需要用一些技巧来处理这些额外信息以保证Web应用能够正常运行。一般而言,技巧无外乎是将额外的信息塞入事件处理程...

2846613430
2016/04/14
64
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员Java教程分享Zookeeper基本原理与运用场景

好程序员Java教程分享Zookeeper基本原理与运用场景一、什么是Zookeeper? zookeeper是一个分布式的一致性协调服务。 换句话说,也可以把zookeeper看成一个小型的分布式文件系统。但是和FastD...

好程序员官网
21分钟前
6
0
mysql表情符

1 修改表字段为utf8md4 ALTER table property_info MODIFY `address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL 2 MySQL数据库服务器配置文件mysqld.cn......

干死it
40分钟前
4
0
正则表达式的基本语法

本文摘自LTP.NET知识库。 正则表达式的形式一般如下: /love/ 其中位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。 用户只要把希望查找匹配对象的模式内容放入“/”定界符之...

木庄
42分钟前
4
0
java 框架有哪些?

十大常用框架: 一、SpringMVC 二、Spring 三、Mybatis 四、Dubbo 五、Maven 六、RabbitMQ 七、Log4j 八、Ehcache 九、Redis 十、Shiro 延展阅读: 一、SpringMVC Spring Web MVC是一种基于J...

java框架开发者
43分钟前
10
0
细谈Mysql事务

文章原创于公众号:程序猿周先森。本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号。 上一篇着重谈到了MySQL锁的概念,里面谈到了事务的概念,其实大部分开发者对于事务肯定不陌生,...

程序猿周先森
51分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部