V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
undef404
V2EX  ›  JavaScript

问一个 jQuery 的简单问题

  •  
  •   undef404 · 2015-10-29 14:53:53 +08:00 · 2464 次点击
    这是一个创建于 3317 天前的主题,其中的信息可能已经有所发展或是发生改变。
    $(selector).click()
    $(selector).trigger( "click" )
    $(selector).on( "click", handler ) 
    //这三个和
    dom.click()
    //有什么区别
    
    <a href="/testtest/test.html"/>
    $("a[href*='testtest']")[0].click()//直接访问该链接
    $("a[href*='testtest']").click()//因为没有 onclick 所以没反应,也没访问链接
    
    13 条回复    2015-10-29 21:53:48 +08:00
    loading
        1
    loading  
       2015-10-29 14:56:17 +08:00 via Android
    浏览器事件
    jquery 文档

    麻烦你先去看看!
    undef404
        2
    undef404  
    OP
       2015-10-29 15:00:22 +08:00
    @loading 看了 jQuery 的文档,还是没搞清楚,$(selector).click()为什么不会触发 a href 的默认 click 事件,访问连接
    YuJianrong
        3
    YuJianrong  
       2015-10-29 15:41:18 +08:00   ❤️ 1
    @undef404 jQuery 事件系统是 jQuery 内虚拟出来的(外部事件会被 jQuery 监听并转换成虚拟的内部事件),所以 .click() 并不会真的在 dom 对象上产生一个 click 事件,只是产生了一个虚拟事件,然后用 jquery 的 on("click")监听的事件才会被响应。

    如果你要模拟真实的点击事件的话,要用原生方法:
    xxx.dispatchEvent(new MouseEvent("click"));
    这样。
    yyfearth
        4
    yyfearth  
       2015-10-29 15:43:32 +08:00   ❤️ 1
    @undef404 你这样调用 click 事件 只是调用你绑定在 click 上面的 functions 而已
    不会调用浏览器本身的功能

    要调用浏览器本身的功能需要用到 dispatchEvent
    https://developer.mozilla.org/samples/domref/dispatchEvent.html
    banri
        5
    banri  
       2015-10-29 15:46:30 +08:00
    jQuery 最后返回的是一个 jQuery 对象,而加上 [0] 之后会返回 DOM 节点

    .click() 在 内部调用了 .on('click') 算是一种快捷方式

    .on 方法是添加事件监听,也就是说,当你鼠标点击时,触发 xx 事件

    而.trigger 是主动触发事件,比如.trigger('click') 就是主动触发了某元素上的点击事件,比如你可以设置网页一加载完成,就主动触发了点击某按钮
    unknownservice
        6
    unknownservice  
       2015-10-29 15:46:39 +08:00
    click 和 href 跳转是两个事件,而且执行先后跟浏览器还有关系。
    调用 click 只会触发绑定在 click 上的事件,并不会真的模拟一个点击鼠标的操作。
    over
    banri
        7
    banri  
       2015-10-29 15:50:53 +08:00
    @banri 貌似不太对,应该说是

    .click(function() {

    })

    内部调用了

    .on('click',function() {

    })
    YuJianrong
        9
    YuJianrong  
       2015-10-29 16:01:47 +08:00
    @YuJianrong 哎呀之前写错了和虚拟事件无关……
    jquery 的 trigger("click") 其实是在 dom 节点上调用了 element.click() 方法,这个方法不会做一些浏览器缺省行为(比如跳转),后者必须用 dispatchEvent 来做。
    Moker
        10
    Moker  
       2015-10-29 16:24:03 +08:00
    我举个前几天碰到的一个问题。
    用 ajax 加载出来的 list 里面的 btn click()是无法直接触发 click 事件,而原来的 list 却可以
    而换成 on(‘ click ’)就可以
    abcfyk
        11
    abcfyk  
       2015-10-29 16:46:23 +08:00
    @Moker 你说的和 LZ 提问的不是同一个问题。

    你的问题属于 jQuery 对 DOM 元素 click 事件冒泡的捕获。

    LZ 的问题是 jQuery 的 click 函数与 DOM 原生 click 事件的区别。
    Moker
        12
    Moker  
       2015-10-29 17:20:04 +08:00
    @abcfyk = =啊哦。。。
    jugelizi
        13
    jugelizi  
       2015-10-29 21:53:48 +08:00
    @Moker 本来就应该是 live 和 on 啊, live 好像要废弃的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4230 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:29 · PVG 13:29 · LAX 21:29 · JFK 00:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.