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. [改善Java代码]多线程使用Vector或HashTable

    Vector是ArrayList的多线程版本,HashTable是HashMap的多线程版本,这些概念我 们都很清楚,也被前辈嘱咐过很多次,但我们经常会逃避使用Vector和HashTable,因为用 ...

  2. 转：nginx 从入门到精通的博文

    转:http://tengine.taobao.org/book/ Nginx开发从入门到精通   缘起 nginx由于出色的性能,在世界范围内受到了越来越多人的关注,在淘宝内部它更是被广泛的使用,众 ...

  3. Windows 7 IE11 F12 不能正常使用

    打开任意网站,按下F12,或者右键鼠标,按L键.出现上面的图的情况!解决办法如下:需要安装下面的补丁(KB3008923) 32位系统:http://www.microsoft.com/en-us/d ...

  4. 我的手机华为荣耀7，运行android程序不输出Log

    解决方法:1 进入手机拨号界面2 输入*#*#2846579#*#*3 输入完毕后自动跳转到<工程菜单>界面4 依次选择后台设置-->LOG设置-->在此可以看见一些列关于LO ...

  5. vs如何新建自己工程的环境变量（局部）和 Windows系统（全局）.

    来源:http://blog.csdn.net/jtop0/article/details/7574139        在vs2008的Project->Property设置里经常会看到类似$ ...

  6. MyBatis参数传入集合之foreach动态sql

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主要有item,index,collection,open,separator,close.ite ...

  7. Session 入库

    session入库 session机制中的数据分部分存储,1部分在客户端的cookie中,2部分在服务器端的session文件中. 务器端的session文件中存储的是$_SESSION变量中的数据. ...

  8. Java 读写XML文件 API--org.dom4j

    om4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个十分优秀的JavaXML API,具有性能优异.功能强大和极其易使用的特点,同时它也是一个开放源代码的软件 ...

  9. （UVALive 7261）Xiongnu's Land 二分

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  10. main与进程 线程

    你起一个CS游戏,这上CS游戏在操作系统中就是一个进程. 但是这个游戏一边在打枪,一边人在走动,一边还有音乐 ,打枪 , 走动 , 音乐 等都是一些线程. 线程不是由进程决定了. 也就是说:你在操作系 ...