html标签元素封装着实用的【事件】，但在很多时候，需要【模拟触发事件】，
比如 【按钮单机事件】  可以实实在在点击按钮触发该事件，但体验而言，很多时候需要js逻辑处理让实现 触发事件的效果
这时就用到了  【模拟触发事件 】

只需要把事件on封装事件    对象.封装事件() 即可  

需要注意的 超链接 标签

=====================-=【转】

我尝试过多次用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>
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>
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>
jQuery(function($) {
    $("a")[0].click();
});
</script>

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

1
document.getElementsByTagName("a").click();

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

js模拟触发事件的更多相关文章

  1. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  2. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  3. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  4. js原生触发事件

    在JQ时代我们使用如下方式,可以手动触发事件 $("button").click(function(){ $("input").trigger("se ...

  5. JQ模拟触发事件

    jQuery 事件 - trigger() 方法 jQuery 事件参考手册 实例 触发 input 元素的 select 事件: $("button").click(functi ...

  6. js获取触发事件的元素

    //获取事件 var e = window.event; //获取元素 obj = e.target || e.srcElement; console.log(e); checkRepeat(e.ta ...

  7. js代码触发事件

    /*** * 需要触发谁的点击事件 * @param how_id 节点的id 如:<input id='test'/> 则how_id=test * @param how_this 这个 ...

  8. JS手动触发事件，转载

    1. createEvent(eventType)参数:eventType 共5种类型:    Events :包括所有的事件.           HTMLEvents:包括 'abort', 'b ...

  9. js鼠标触发事件集合

    转载自:http://blog.sina.com.cn/s/blog_627002d101010yb7.html 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ...

随机推荐

  1. Mac下批量打包

    两种方式: 第一种:有源码 这种方式比较 简单.利用ant打包.直接shell脚本修改 配置渠道号的文件.我们目前是用的umeng的.在AndroidManifest.xml里.提供一个简单的修改渠道 ...

  2. android代码片段一

    1.Android判断是Pad或者手机 public boolean isTabletDevice() { TelephonyManager telephony = (TelephonyManager ...

  3. Xcode磁盘空间大清理（转）

    Xcode磁盘空间大清理 我的设备是Macbook Air 13’ Mid 2011,128G SSD.最近开始有些存储压力了,用Clean My Mac清理一部分旧文件后,决定对Xcode动手. 移 ...

  4. （转）linuxmint,ubuntu 下修改guake宽度方法

    之前在网上找到修改guake.py的方式,但是我一直没能找到guake.py的文件,弄的我纠结,后来找到这个文章,这个确实是有效果的 Ubuntu12.04上Guake在唤出的时候滚动条会消失,主要原 ...

  5. 第一次知道Winform的窗体之间传值怎么写，分享给小白~

    之前为了这事,百度了一天也没找到,最终使用了静态变量了. 窗体Form1: private void button1_Click(object sender, EventArgs e) { var f ...

  6. 用Dalvik指令集写个java类

    Dalvik指令集 .class public LCalculate;#定义类名 .super Ljava/lang/Object;#定义父类 .method public static main([ ...

  7. ORACLE多表查询优化

    ORACLE有个高速缓冲的概念,这个高速缓冲就是存放执行过的SQL语句,那oracle在执行sql语句的时候要做很多工作,例如解析sql语句,估算索引利用率,绑定变量,读取数据块等等这些操作.假设高速 ...

  8. Linux文件系统结构

    准备写个Linux基础知识总结, 第一个想到的就是整理一个常用系统文件夹结构的说明,园子里“Aric小屋”的结构图整理的不错,我就不重复整理了,故借用一下

  9. JSPatch 遇上swift

    swift使用JSPatch要点: 继承自NSObject的Swift类,其继承自父类的方法具有动态性,其他自定义方法.属性需要加dynamic修饰才可以获得动态性(public属性除外) 例子可参看 ...

  10. XML解析——Java中XML的四种解析方式

    XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性.给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析方式都是一样的,只不过实现的语法不同而已. XML的解析方式分为四 ...