iuhux
V2EX  ›  问与答

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

  •  
  •   iuhux · Jul 17, 2014 · 4955 views
    This topic created in 4340 days ago, the information mentioned may be changed or developed.
    当我在触发一个a标签的click事件时,没有发生URL跳转。这是为什么呢?
    代码在此: http://jsfiddle.net/iuhux/xfu4N/
    14 replies    2014-07-17 22:07:51 +08:00
    Tonni
        1
    Tonni  
       Jul 17, 2014
    ```
    <a href="http://www.baidu.com" id="b">b</a>
    ```
    scarlex
        3
    scarlex  
       Jul 17, 2014
    ```
    $("#a").click(function() {
    $("#b")[0].click();
    })
    ```
    Tonni
        4
    Tonni  
       Jul 17, 2014
    哦,不好意识看错问题了,浏览器不允许JS触发链接实现跳转,不过可以hack,你在标签里面嵌套一个span,下面触发span的click事件,事件冒泡到父标签a链接时会出发a的click事件,从而实现页面跳转,另外你的代码里面a链接地址是不对的,参考1楼和2楼我给出的回答,修改完后的代码是这样的:
    http://jsfiddle.net/KtQQY/
    iuhux
        5
    iuhux  
    OP
       Jul 17, 2014
    @scarlex 哦,这个我知道可以。我就是想知道那个为什么不可以
    Tonni
        6
    Tonni  
       Jul 17, 2014   ❤️ 1
    这事StackOverflow上的讨论: http://stackoverflow.com/a/21334234
    iuhux
        7
    iuhux  
    OP
       Jul 17, 2014
    @Tonni 谢谢
    Tonni
        8
    Tonni  
       Jul 17, 2014
    试了下3楼的回答,发现我4楼的回答是不确切的。
    txlty
        9
    txlty  
       Jul 17, 2014
    $("#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  
       Jul 17, 2014   ❤️ 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  
       Jul 17, 2014
    这个有点意思,用原生JavaScript写这个函数没有任何问题,用jQuery却阻止了连接跳转事件
    Tonni
        12
    Tonni  
       Jul 17, 2014 via Android
    @scarlex 嗯,我之前都是用事件冒泡的方式触发的,受教了。
    Biwood
        13
    Biwood  
       Jul 17, 2014   ❤️ 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  
       Jul 17, 2014
    你想跳网页 location.href = url 不就行了,没必要这么搞吧
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5713 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 53ms · UTC 03:09 · PVG 11:09 · LAX 20:09 · JFK 23:09
    ♥ Do have faith in what you're doing.