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

有没有比较便捷的方法,可以知道前端触发了什么 funcion?比如在一个网页中,我点击某个未知功能的按钮,触发了一连串 function,如何快捷地知道这些的 function 名字?

  •  
  •   good1uck · 2020-01-16 02:21:19 +08:00 · 1696 次点击
    这是一个创建于 1524 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  2020-01-16 04:27:16 +08:00
    不仅局限于按钮触发的 function
    第 2 条附言  ·  2020-01-16 04:31:27 +08:00
    因为最近被交接了一个项目,前任注释和文档很少.
    10 条回复    2020-01-20 23:09:49 +08:00
    KasuganoSoras
        1
    KasuganoSoras  
       2020-01-16 02:35:41 +08:00   ❤️ 2
    浏览器控制台输入:
    $("这里是元素选择器")[0].onclick

    例如帖子的顶和踩按钮:
    $("#topic_638293_votes > a:nth-child(1)")[0].onclick

    返回内容:
    function onclick(event) {
    upVoteTopic(638293);
    }
    good1uck
        2
    good1uck  
    OP
       2020-01-16 04:27:45 +08:00
    @KasuganoSoras 谢谢,如果不仅局限于按钮触发的 function 呢?
    moyupoi
        3
    moyupoi  
       2020-01-16 08:47:12 +08:00 via iPhone   ❤️ 1
    调试工具有个事件选项,选上就行,每个都调用,比较烦就是了
    luchenwei9266
        4
    luchenwei9266  
       2020-01-16 09:47:25 +08:00   ❤️ 1
    试一下给这个按钮加断点。触发断点后,然后在 Chrome 调试工具的 Sources 面板的右侧有个 Call Stack,可以看相关的调用栈信息。
    daguaochengtang
        5
    daguaochengtang  
       2020-01-16 10:16:32 +08:00   ❤️ 1
    @KasuganoSoras 如果代码是用 addEventListener 添加的事件处理器,onclick 可能是 null 哦,简单点可以在当前页面控制台测试以下代码:

    ```
    document.body.onclick // return null
    document.body.addEventListener('click', function(){}) // 添加了点击事件
    document.body.onclick // return null 虽然添加了点击事件,但是 onclick 属性还是 null
    ```
    joe237
        6
    joe237  
       2020-01-16 10:21:20 +08:00   ❤️ 1
    以 chrome 浏览器的 devtools 为例,打开 devtools,选择 elements 选项,找到你的元素,不限定于“按钮”,任何元素都成,左侧面板中有个 event listeners,里面包含了该对应元素上的所有事件,每个事件对应的方法都可以展开看详细内容
    daguaochengtang
        7
    daguaochengtang  
       2020-01-16 10:27:58 +08:00   ❤️ 2
    daguaochengtang
        8
    daguaochengtang  
       2020-01-16 10:30:59 +08:00
    接上图,保存为变量后 chrome 会把这个函数赋给一个变量,比如 temp1,你直接 temp1(),和点击感谢是一样的
    ```
    ƒ onclick(event) {
    if (confirm('你确定要向本主题创建者发送谢意?')) { thankTopic(638293, '14539'); }
    }
    ```
    vanishcode
        9
    vanishcode  
       2020-01-20 23:07:38 +08:00
    不知道是不是你想要的
    https://github.com/vanishcode/Blog/issues/91
    vanishcode
        10
    vanishcode  
       2020-01-20 23:09:49 +08:00
    getEventListeners()这个方法是 native 的 cli 函数,代码里用不了( puppeteer 可能能用),上文博客中的$._data 是 jq 的方法,具体你可以看它怎么实现的,或者使用 puppeteer 或者其他 headless 注入一个 jq。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5856 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:51 · PVG 10:51 · LAX 19:51 · JFK 22:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.