javascript - 无法使用 Puppeteer 在 HTML 元素上附加新的单击事件处理程序
问题描述
为什么在从 VS Code 手动单击调试会话时未触发锚点上的单击事件?
大致来说,这是我的目标:
- 在headful Chrome中使用 Puppeteer 访问linkedin.com
- 登录
- 访问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" })
后在线放置了一个断点。在打开的浏览器中(因为 headless 设置为 false),当代码等待恢复时,我用鼠标单击了标签中的标签,期望在 headful debug Chrome 浏览器的控制台中看到“有人点击了链接” . 但我在浏览器或 VS Code 的调试控制台中都没有看到日志。我在这里错过了什么吗?onclick
<a>
<a>
<body>
解决方案
那是因为您实际上并没有单击锚标记。您已将一个事件附加到它“单击”并定义了当我们单击它时会发生什么,但您实际上并没有单击它。只需添加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
,您正在附加一个事件侦听器,而不是实际单击它
推荐阅读
- reactjs - 在路由组件上重定向,没有页眉和页脚组件
- rest - 使用 Civetweb 和 Lua 的 REST API
- typescript - 如何在 Typescript 中管理多个函数返回类型?
- wordpress - Polylang 语言切换器 - 仅显示语言代码
- email - C++ Builder - Indy - 接收认证电子邮件
- hyperledger-fabric - configtx.yaml 中的“地址”指的是什么?
- c# - 从面板获取数据(自动化)
- typescript - Typescript 不明白 props 是由 react-navigation withNavigation HOC 提供的
- angular - 可调整大小的 Angular 侧边栏
- javascript - 无法将 ts 编译为 js,找不到模块“量角器”