a标签添加点击事件，详解a标签添加onclick事件的几种方式

亲爱的读者们，你是否对a标签添加点击事件和详解a标签添加onclick事件的几种方式的关系感到好奇？在本文中，我将深入探讨它们之间的联系，让你对此有更深刻的理解。

html a标签如何让他先运行点击事件(onclick) 在运行a链接

其实正常逻辑来讲 a标签里同时存在onclick和href时就是先执行onclick再执行href跳转的可能存在的一个问题是页面跳转了 onclick里写的函数虽然执行时间比跳转早但是可能还未执行完所以可能就会出现跳页以后想要的效果没实现刷新一下就出来了。可以把Href跳转放到onclcik执行成功返回success用window.location.href实现跳页

如何为动态生成的<a>标签添加事件 ,只有点击时触发

插入html代码后要重新绑定事件

近日工作当中，需要对由jquery动态生成的标签添加一些事件效果。

最初的做法是在页面载入时调用事件监听如下：

Js代码

1.$(document).ready(function(){

2.$("a.keyWord1").hover( 3. function(){ 4.$(this).css("text-decoration","underline"); 5.$(this).css("color","#fc9b3f"); 6.},

7. function(){ 8.$(this).css("text-decoration","none"); 9.$(this).css("color",""); 10.}

11.);

12.});

$(document).ready(function(){

$("a.keyWord1").hover(

function(){

$(this).css("text-decoration","underline");

$(this).css("color","#fc9b3f");

},

function(){

$(this).css("text-decoration","none");

$(this).css("color","");

}

);

});本意是，当鼠标移动到a标签时触发hover效果。但是最终一点发应也没有，当然以上的代码没有问题，我在其它地方是可以使用的。

后来对比了其它地方用到这段代码的标签，发现我当前的a标签是通过jquery动态生成的，而不是后台生成的，所以思考可能是由于jquery在页面加载绑定事件时，由于我的后来动态生成的a标签还不存在，所以事件绑定自然就不成立！当然一点反应也没有！

找到问题，就开始找解决方案：

方案如下（不是很完美）

在动态生成标签后，添加如下代码：

Js代码

1.$("a.keyWord1").bind("mouseover",function(){

2.$(this).css("text-decoration","underline"); 3.$(this).css("color","#fc9b3f"); 4.

5.});

6.$("a.keyWord1").bind("mouseout",function(event){ 7.//阻止事件冒泡 8. event.stopPropagation();

9.$(this).css("text-decoration","none"); 10.$(this).css("color","#06F"); 11.$(this).unbind(); 12.});

$("a.keyWord1").bind("mouseover",function(){

$(this).css("text-decoration","underline");

$(this).css("color","#fc9b3f");

});

$("a.keyWord1").bind("mouseout",function(event){

//阻止事件冒泡

event.stopPropagation();

$(this).css("text-decoration","none");

$(this).css("color","#06F");

$(this).unbind();

});

上面的代码意思是，对a标签，且class=keyWord1的标签进行事件的绑定！

这样就达到我的目的！

详解a标签添加onclick事件的几种方式

我们常用的在a标签中有点击事件：

1. a href="javascript:js_method();" rel="external nofollow"

这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句

2. a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3.a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法跟跟2种类似，区别只是执行了一条空的js代码。

4.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

综合上述，在a中调用js函数最适当的方法推荐使用：

a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

以上所述是小编给大家介绍的a标签添加onclick事件的几种方式详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

怎样使用a标签的href属性与onclick事件

这次给大家带来怎样使用a标签的href属性与onclick事件，使用a标签的href属性与onclick事件的注意事项有哪些，下面就是实战案例，一起来看一下。

a标签主要用来实现页面跳转，可以通过href属性实现，也可以在onclick事件里实现。

<a onclick="window.location.href='www.gxlcms.com'" href="javascript:void(0);">脚本之家</a>这段代码在主流浏览器里都没问题，但在IE6下会出现不能跳转的问题。这究竟是什么原因呢？

javascript:void(0);void(arg);可以理解为永远返回null的函数，但是其参数不能为空。其参数可以为任意的表达式甚至函数。

<a href="javascript:void(name='PHP中文网'); alert(name);">测试</a>测试

IE6先运行DOM本身绑定的事件，如onclick；如果没有阻止冒泡，则会顺序执行href属性。而void(0);正是不需要执行任何事件，则IE6告诉浏览器不执行任何事件（覆盖之前的动作），并且终止冒泡相当于return false;于是浏览器没有执行任何动作。所以只要在onclick事件内阻止冒泡事件即可。

代码如下:

<a onclick="window.location.href='http://www.gxlcms.com';return false;" href="javascript:void(0);">PHP中文网</a>这样在IE6下就可以正常运行了。

另外还有一种方法就是不使用javascript:void(0);而改使用#也可以避免，href属性内的#本来的意思就是锚点#name所以当不指定任何锚点时会到页面顶端。#是有特定意义的，默认是#top，如果#后有内容会被认为是一个标签而从页面找到相应标签跳转到该处，找不到会跳转到页首，如果不想让跳转，可以使用###，###就是一个无意义的标签指定。

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

HTML的cellpadding属性与cellspacing属性应该如何使用

HTML中head头结构应该如何使用

在HTML中disabled与readonly的有什么不同之处？

文章到此结束，希望我们对于a标签添加点击事件的问题能够给您带来一些启发和解决方案。如果您需要更多信息或者有其他问题，请随时联系我们。