转自：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. Adding Swagger to Web API project

    Adding Swagger to Web API project. All source code for this series can be found here. When you creat ...

  2. PHP反射获取类中的所有常量

    <?php// Yii 2// namespace yournamespace;// use Yii; /** * 缓存辅助类 */ class CacheHelper { /** * 缓存键 ...

  3. CentOS系统将UTC时间修改为CST时间

    1.编辑时间配置文件 # vi /etc/sysconfig/clock ZONE="Asia/Shanghai" UTC=false #设置为false,硬件时钟不于utc时间一 ...

  4. printk函数日志级别的设置【转】

    本文转载自: 下面执行cat /proc/sys/kernel/printk 打印出的四个数字分别代表: 控制台日志级别.默认的消息日志级别.最低的控制台日志级别和默认的控制台日志级别 只有当prin ...

  5. POJ 2195：Going Home（最小费用最大流）

    http://poj.org/problem?id=2195 题意:有一个地图里面有N个人和N个家,每走一格的花费是1,问让这N个人分别到这N个家的最小花费是多少. 思路:通过这个题目学了最小费用最大 ...

  6. 三联运算&&字节码转换

    三联运算 if 1 == 1: name = 'alex'else: name = 'sb' name = 'alex' if 1 == 1 else 'sb lambda f2 = lambda a ...

  7. JAVA基础知识之JDBC——RowSet

    RowSet概念 在C#中,提供了一个DataSet,可以把数据库的数据放在内存中进行离线操作(读写),操作完成之后再同步到数据库中去,Java中则提供了类似的功能RowSet. RowSet接口继承 ...

  8. illustrator将图片转换成ai路径

    窗口->图像描摹 第一选择模式:彩色 第二步:调整颜色的数值 最后点击工具栏上的扩展按钮转成路径 搞定~

  9. HTTP抓包神器HTTP Analyzer V7 Build7.5.4汉化+注册机

    原版安装包.汉化文件.注册机下载:http://pan.baidu.com/s/1bMv1Si 密码:cqq1 一.安装:下载并安装英文原版  下载页面:http://www.ieinspector. ...

  10. ibatis mybatis sql语句配置 符号不兼容 大于号 小于号<!CDATA[ ]>

    ibatis mybatis sql语句配置 符号不兼容 大于号 小于号<!CDATA[ ]> 因为这个是xml格式的,所以不允许出现类似">"这样的字符,但是都 ...