使用jQuery模拟鼠标点击a标签事件

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/42/ ]

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

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

先看下边的代码:

<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标签中的文字了?

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

<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的补充,我们可以使用更加简单的方式实现同样的功能,代码如下:

<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写法类似如下:

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

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

    评论:

    1. 付耿磊 回复2014年04月17日 14时36分
      磨者
       
        磨延城 @付耿磊 回复2014年04月17日 20时42分
        磨者

    2. 回复2014年06月10日 20时11分
      磨者
      谢谢。
      正愁这事,原来是这个原因。真聪明~
      愿你每天有个好心情。

        磨延城 @林 回复2014年06月12日 13时14分

        很高兴能帮到你

    3. 磨者 134 回复2014年06月12日 01时10分
      磨者

        磨者 833 @磨者 134 回复2016年05月31日 14时14分
        磨者

    4. 磨者 135 回复2014年06月12日 01时10分
      磨者
      safari 不支持

        磨延城 @磨者 135 回复2014年06月12日 13时13分

        safari浏览器还真没试过
        你说的不支持,是画板模式
        还是模拟鼠标点击a标签事件

        sdf @磨者 135 回复2018年03月07日 15时48分
        磨者

    5. 甜蜜 回复2014年08月11日 17时11分
      磨者
      嗦嘎,我都没有发现居然是如此的简单,牛逼,膜拜

    6. bl 回复2015年04月03日 12时20分
      磨者

    7. bl 回复2015年04月03日 12时20分
      磨者
      你试试 $("a")[0].click()

        磨延城 @bl 回复2015年06月15日 17时39分

        感谢你的补充
        你提供的方法更加简便了

    8. htsscom 回复2015年12月08日 17时32分
      磨者

    9. 磨者 809 回复2015年12月23日 15时15分
      磨者

    10. 磨者 810 回复2015年12月23日 15时16分
      磨者

    11. 上一页123下一页 共3页

      我来说两句:

        切换  

      磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

        切换  

      磨途歌随机验证码