js javascript 模拟点击 超级链接点击 转

时间：2022-08-31 12:33:18

转自：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&period;location&period;href不跳转的bug 及 解决方案

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

  2. jquery 动态绑定bind&lpar;&rpar;及模拟鼠标点击A链接

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

  3. javascript&colon;void&lpar;0&rpar; &comma;设置a链接无效&comma;设置点击a页面不刷新&comma;不跳动

    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") %&gt ...

  8. HTML超级链接详细讲解

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

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

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

随机推荐

  1. Lazyr&period;js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  2. JavaScript AJAX stream 流式显示

      当使用AJAX进行信息交互的时候,如果服务器返回的信息比较大,那么相对于传送完成之后的统一显示,流式显示就比较友好了. 流式实现 原理就是设置定时器,定时的查看AJAX对象的状态并更新内容,如果传 ...

  3. cmake的使用二：链接第三方静态库

    cmake的使用二:链接第三方静态库

  4. Solr In Action 笔记&lpar;3&rpar; 之 SolrCloud基础

    Solr In Action 笔记(3) 之 SolrCloud基础 在Solr中,一个索引的实例称之为Core,而在SolrCloud中,一个索引的实例称之为Shard:Shard 又分为leade ...

  5. Storm集群安装与部署

    准备 1.三台虚拟机 192.168.1.128 Nimbus 192.168.1.131 Supervisor 192.168.1.132 Supervisor 2.JDK1.8 3.Zookeep ...

  6. RabbitMQ基本操作

    更加详细的 链接https://www.cnblogs.com/dwlsxj/p/RabbitMQ.html RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(A ...

  7. admin 后台

    https://segmentfault.com/a/1190000015835976#articleHeader3https://github.com/PanJiaChen/vue-element- ...

  8. vue企业项目搭建过程&lpar;vue-cli脚手架超详细教程 傻瓜-入门&rpar;

    vue作为现在主流的前端框架,有必要学习一下. vue的官方文档还是不错的,开源中文,一个爽字形容. 如果不是实际开发需要vue-cli构建项目,那么可以在加一个爽. 然而要构建的时候发现官方文档还是 ...

  9. Query to find the eligible indexes for rebuilding

    Query to find the eligible indexes for rebuilding The following script can be used to determine whic ...

  10. java beanUtils框架

    beanUtils是Apache觉得sun公司的内省不够爽,自己又开发了一套可以操作JavaBean的API 所以beanUtils是第三方jar包,使用beanUtils要导包: 在工程目录下新建一 ...

相关文章