转自：http://mo2g.com/view/42/

我尝试过多次用jQuery模拟用户点击a标签的功能，但都没有成功，并且困扰了很久。前段时间的一次发呆，冒出了新的想法，于是就动手进行了测试。

先看下边的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<meta charset="UTF-8">
<title>磨途歌-A标签测试1</title>
</head>
<body>
    <a href="http://blog.mo2g.com">磨途歌</a>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($) {
    //给所有A标签绑定点击触发事件
    $('a').click(function() {
        alert(1);
    });
    //触发所有A标签的点击事件
    $('a').click();
});
</script>

上边的代码确实已经触发了点击A标签事件，但大家一定也会有疑问，为什么点击了A标签，却不触发A标签的跳转事件？

一开始还以为是浏览器做了相应的安全措施，屏蔽了JS对A标签的操作，后来发现，并不是这样的，接下来就说说其中的原委。

在开始解释前，我先抛出一个问题。在我们点击“A标签”的时候，究竟是点击了什么才发生的跳转？

1）点击的是“A标签”本身？

2）点击的是“A标签”中显示的文字？

说到这里，大家应该明白了，我们上边的代码已经证实了点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了？

既然有了头绪，那么就来动手试试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<meta charset="UTF-8">
<title>磨途歌-A标签测试2</title>
</head>
<body>
    <a href="http://www.mo2g.com">磨途歌</a>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($) {
    var mo2g = '<span id="mo2g">磨延城</span>';
    //给A标签中的文字添加一个能被jQuery捕获的元素
    $('a').append(mo2g);
    //模拟点击A标签中的文字
    $('#mo2g').click();
});
</script>

这下效果出来了，事实证明了上述的推断是正确的，所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。

2015年6月15日，根据@bl的补充，我们可以使用更加简单的方式实现同样的功能，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<meta charset="UTF-8">
<title>磨途歌-A标签测试3</title>
</head>
<body>
    <a href="http://www.mo2g.com">磨途歌</a>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($) {
    $("a")[0].click();
});
</script>

打印$("a")[0]，得到的是http://www.mo2g.com，但实际上$("a")[0]是一个object对象，或许说是DOM对象更贴切一些。经过测试发现，其实原生的js就已经实现了类似的点击a标签的功能。原生js写法类似如下：

1
document.getElementsByTagName("a")[0].click();

只要获取到A标签的DOM对象，就能使用click()函数激活点击事件了。

js javascript 模拟点击 超级链接点击 转的更多相关文章

  1. JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...

  2. jquery 动态绑定bind()及模拟鼠标点击A链接

    近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...

  3. javascript:void(0) ,设置a链接无效,设置点击a页面不刷新,不跳动

    http://www.cnblogs.com/opper/archive/2009/01/12/1373971.html 我想使用过ajax的都常见这样的代码: <a href="ja ...

  4. 模拟点击a链接

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  5. js怎么模拟点击网页元素

    在测试页面中,引入jquery源文件,并添加一个div标签,一个a标签,为了演示效果a标签暂时不添加地址 通过jquery为div标签绑定一个点击事件,这个事件是被动执行的.意思是要点击才会触发的 在 ...

  6. href超级链接里加上javascript代码的，还有target问题

    href超级链接里加上javascript代码的,还有target问题 得把target="_blank"去掉才好用,在google浏览器有这个也没事,但是在Ie里有这个就不行了

  7. GridView中的超级链接技巧

    GridView中的超级链接,可以设置一个模版列,放入超级链接的控件,设置绑定参数即可. 数据绑定方式有两种,如下示例: Eval方式 <%# Eval("id") %> ...

  8. HTML超级链接详细讲解

    超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转.超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习. —  注意 ...

  9. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

随机推荐

  1. 【转】linux下memcached安装以及启动

    1.下载memcached服务器端安装文件 版本: memcached-1.4.25.tar.gz 下载地址:http://www.memcached.org/files/memcached-1.4. ...

  2. SqlServer数据库端口默认是1433吗？

    1433端口,是SQL Server默认的端口,SQL Server服务使用两个端口:TCP-1433.UDP-1434.其中1433用于供SQL Server对外提供服务,1434用于向请求者返回S ...

  3. Android requires compiler compliance level 5.0 or 6.0. Found '1.7' instead

    Android requires compiler compliance level 5.0 or 6.0. Found '1.7' instead 在解决问题Underscores can only ...

  4. Viewdraghelper解析

    2013年谷歌i/o大会上介绍了两个新的layout: SlidingPaneLayout和DrawerLayout,现在这俩个类被广泛的运用, 其实研究他们的源码你会发现这两个类都运用了ViewDr ...

  5. JSR 303标准

    JSR 303是Java为bean数据合法性校验提供的标准框架,JSR 303通过在Bean属性上标注类似于@NotNull.@Max等标准的注解指定校验规则,并通过标准的校验接口对bean进行验证. ...

  6. 转：客制FORM调用会计科目弹性域/根据科目取得CODE_COMBINATION_ID

    1.首先在创建数据表时,添一个字段用来保存会计科目的ID.如:CODE_COMBINATION_ID 2.在FORM相应的数据块增加两个ITEM,用来显示科目NUMBER与DESCRITION. 例: ...

  7. 【过程改进】 windows下jenkins常见问题填坑

    没有什么高深的东西,1 2天的时间大多数人都能自己摸索出来,这里将自己遇到过的问题分享出来避免其他同学再一次挖坑. 目录 1. 主从节点 2. Nuget自动包还原 3. powershell部署 4 ...

  8. 在学Go语言

    首发:个人博客,更新&纠错&回复 开始学点儿Go语言,这语言据说在国内比在国外火,社区上褒贬不一,不过“小马过河”嘛,总要先自己试试再来下结论. 环境准备: 1.在Golang中国下载 ...

  9. C#写WPF程序，SQLSever2008 提示插入数据成功,却查询不到数据

    1.提示存储成功,但是数据库中没有数据.今天在用C#写一个wpf程序时,要向数据库Sql server2008 中插入数据,程序提示成功,但打开数据库却没有值; 经过查询发现,数据存储到默认路径下的数 ...

  10. AsyncTask的缺陷和注意事项

    1. AsyncTask 主要是用来处理后台耗时操作,并将数据更新到主线程的一个工具类. AsyncTask的执行分为四个步骤,每一步都对应一个回调方法,这些方法不应该由应用程序调用,开发者需要做的就 ...