V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
iuhux
V2EX  ›  问与答

关于 jQuery 触发 click 事件有个疑问

  •  
  •   iuhux · 2014-07-17 20:24:18 +08:00 · 4532 次点击
    这是一个创建于 3812 天前的主题,其中的信息可能已经有所发展或是发生改变。
    当我在触发一个a标签的click事件时,没有发生URL跳转。这是为什么呢?
    代码在此: http://jsfiddle.net/iuhux/xfu4N/
    14 条回复    2014-07-17 22:07:51 +08:00
    Tonni
        1
    Tonni  
       2014-07-17 20:36:32 +08:00
    ```
    <a href="http://www.baidu.com" id="b">b</a>
    ```
    Tonni
        2
    Tonni  
       2014-07-17 20:37:51 +08:00
    scarlex
        3
    scarlex  
       2014-07-17 20:40:30 +08:00
    ```
    $("#a").click(function() {
    $("#b")[0].click();
    })
    ```
    Tonni
        4
    Tonni  
       2014-07-17 20:46:12 +08:00
    哦,不好意识看错问题了,浏览器不允许JS触发链接实现跳转,不过可以hack,你在标签里面嵌套一个span,下面触发span的click事件,事件冒泡到父标签a链接时会出发a的click事件,从而实现页面跳转,另外你的代码里面a链接地址是不对的,参考1楼和2楼我给出的回答,修改完后的代码是这样的:
    http://jsfiddle.net/KtQQY/
    iuhux
        5
    iuhux  
    OP
       2014-07-17 20:47:27 +08:00
    @scarlex 哦,这个我知道可以。我就是想知道那个为什么不可以
    Tonni
        6
    Tonni  
       2014-07-17 20:48:11 +08:00   ❤️ 1
    这事StackOverflow上的讨论: http://stackoverflow.com/a/21334234
    iuhux
        7
    iuhux  
    OP
       2014-07-17 20:49:34 +08:00
    @Tonni 谢谢
    Tonni
        8
    Tonni  
       2014-07-17 20:50:01 +08:00
    试了下3楼的回答,发现我4楼的回答是不确切的。
    txlty
        9
    txlty  
       2014-07-17 21:01:28 +08:00
    $("#b").click(function(e) {
    console.log(e)
    })
    $("#a").click(function() {
    var e = document.createEvent('MouseEvent');
    e.initEvent('click', false, false);
    document.querySelector("#b").dispatchEvent(e);
    })
    scarlex
        10
    scarlex  
       2014-07-17 21:18:41 +08:00   ❤️ 2
    @Tonni
    @luhux

    $('#b') 返回的是 jQuery element,而 $('#b')[0] 返回的是 HTML element。
    在 jQuery element 上面调用 click 是对该对象进行事件绑定,不过按照官方说法,$('#b').click() 也是 $('#b').trigger('click') 的简写。但作用在 <a> 标签上的时候会把 href 属性忽略掉。而在 HTML element 上面调用 click 才会真正跳转。


    另一种写法是直接在 click 函数中进行跳转:

    $("#b").click(function(e) {
    ----var href = $(this).attr('href');
    ----location.href = href;
    });

    $("#a").click(function() {
    ----$("#b").click();
    })


    参考资料:
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click
    http://api.jquery.com/click/
    Biwood
        11
    Biwood  
       2014-07-17 21:25:49 +08:00
    这个有点意思,用原生JavaScript写这个函数没有任何问题,用jQuery却阻止了连接跳转事件
    Tonni
        12
    Tonni  
       2014-07-17 21:37:37 +08:00 via Android
    @scarlex 嗯,我之前都是用事件冒泡的方式触发的,受教了。
    Biwood
        13
    Biwood  
       2014-07-17 21:42:04 +08:00   ❤️ 2
    直接看了一下未编译版的jQuery源码,这里是click()的定义:

    click: {
    // For checkbox, fire native event so checked state will be right
    trigger: function() {
    if ( jQuery.nodeName( this, "input" ) && this.type === "checkbox" && this.click ) {
    this.click();
    return false;
    }
    },

    // For cross-browser consistency, don't fire native .click() on links
    _default: function( event ) {
    return jQuery.nodeName( event.target, "a" );
    }
    }

    注释里面有一句“For cross-browser consistency, don't fire native .click() on links”,大意是“为了兼容多个浏览器,不触发链接上原生的click()事件”。这应该是jQuery为了增强其兼容性而做出的妥协吧。
    chemzqm
        14
    chemzqm  
       2014-07-17 22:07:51 +08:00
    你想跳网页 location.href = url 不就行了,没必要这么搞吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5720 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:38 · PVG 09:38 · LAX 17:38 · JFK 20:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.