为何使用querySelector调用click()点击div后关注操作未生效？

Shopee这类站点为了防范自动化操作，不会仅监听click事件，同时会校验触发事件的真实性：

• 需接收完整的鼠标事件序列（mousedown → mouseup → click）才会触发后续逻辑
• 会校验事件的isTrusted属性，仅属性为true（真实用户手动触发）的事件才会被执行，原生JS模拟的click()事件该属性默认为false，会被直接拦截

方案1：模拟完整鼠标事件流（控制台/油猴脚本可用） #

不要直接调用click()方法，手动触发完整的鼠标事件流，代码示例：

const followBtn = document.querySelector('#shop-followers > ul > li:nth-child(1) > div.btn-follow.follow.L14');
// 先校验元素是否匹配正确
if (!followBtn) {
  console.log('未找到目标关注按钮，请检查选择器是否正确');
  return;
}
const btnPos = followBtn.getBoundingClientRect();
const eventOpts = {
  bubbles: true,
  cancelable: true,
  clientX: btnPos.x + 10,
  clientY: btnPos.y + 10
}
// 模拟鼠标按下
followBtn.dispatchEvent(new MouseEvent('mousedown', eventOpts));
// 模拟鼠标抬起
followBtn.dispatchEvent(new MouseEvent('mouseup', eventOpts));
// 最后触发点击
followBtn.dispatchEvent(new MouseEvent('click', eventOpts));

方案2：使用浏览器自动化工具 #

如果方案1不生效，是因为部分浏览器禁止手动修改isTrusted属性，模拟的事件仍然会被识别为非用户操作，可使用Playwright、Puppeteer这类浏览器自动化工具实现，它们内置的点击方法会生成完全符合真实用户特征的事件，isTrusted属性为true，不会被站点拦截。
以Playwright为例，核心代码示例：

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('你的目标页面地址');
  // 自动模拟真实用户点击关注按钮
  await page.click('#shop-followers > ul > li:nth-child(1) > div.btn-follow.follow.L14');
  await browser.close();
})();

额外注意事项 #

• 操作频率不要过高，否则容易触发站点风控，导致账号被限制功能
• 操作前可先在控制台运行选择器代码，确认返回的是目标按钮元素

内容的提问来源于stack exchange，提问作者Creative Commons Studio