Question

为什么在从VS代码手动单击调试会话时，锚点上的on click事件不会触发？

从广义上讲，这是我的目标：

使用Puppeteer在 headful Chrome
登录
转到linkedin.com/jobs
为页面上的所有链接附加点击事件处理程序
在附加事件处理程序后暂停node.js执行
使用鼠标手动单击链接以观察此新的事件处理程序

在代码中，这就是我得到的

const puppeteer = require('puppeteer')
async function main() {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();

    await page.goto('https://www.linkedin.com/');
    await login(page);
    await page.goto('https://www.linkedin.com/jobs/');
    await attachLinks(page);
    await page.screenshot({ path: "bla" })
    browser.close();
};

async function attachLinks(page) {
    const bodyHandle = await page.$('body');
    await page.evaluate( (body, numLinks=3) => {
        let anchors = Array.from( body.querySelectorAll("a") ).
            filter( (e, i) => i < numLinks );
        for(let i = 0; i < anchors.length; i++) {
            let a = anchors[i];
            console.log(`Binding for ${a.href}`);

            // This event does not trigger!!!!!
            a.addEventListener("click", e => { 
                console.log("some one clicked the link");
                e.preventDefault(); 
                e.stopPropagation(); 
                return false; 
            });
        };
    }, bodyHandle);
    await bodyHandle.dispose();
}

main();

然后使用VS Code和node.js调试支持，在附加了await page.screenshot({ path: "bla" })标记的onclick事件后，我在第<a>行放置了一个断点。在打开的浏览器中（无头设置为false），当代码等待恢复时，我用鼠标点击了<a>中的<body>标签，希望看到＆＃34;有人点击链接＆＃34;在头脑调试Chrome浏览器的控制台。但我没有在浏览器或VS Code的调试控制台中看到日志。我在这里错过了什么吗？

Answer 1

那是因为你实际上没有点击锚标签。你已经为它添加了一个“点击”事件，并定义了点击它时会发生什么，但你实际上没有点击它。只需添加a.click()，如

       // This event will now trigger
        a.addEventListener("click", e => { 
            console.log("some one clicked the link");
            e.preventDefault(); 
            e.stopPropagation(); 
            return false; 
        });

        a.click();

查看名称addEventListener，您正在附加一个事件监听器，而不是实际点击它

无法使用Puppeteer在HTML元素上附加新的单击事件处理程序

1 个答案: