Javascript 如何在木偶戏中双击

我有一个可以添加不同对象的工作区。有一种情况是，双击可以自动将对象添加到工作区中。我经历了不同的解决方案，但没有一个真正有效

这就是我尝试过的：

await page.evaluate(selector => {
  var targLink = document.querySelector(selector);
  var clickEvent = document.createEvent('MouseEvents');
  clickEvent.initEvent('dblclick', true, true);
  targLink.dispatchEvent(clickEvent);
}, selector)

你可以用

---

首先获取

x

和

y

const selector = "#elementID";

const rect = await page.evaluate((selector) => {
  const element = document.querySelector(selector);
  if (!element) return null;
  const { x, y } = element.getBoundingClientRect();
  return { x, y };
}, selector);

然后将

clickCount

作为模拟双击的选项传递

await page.mouse.click(rect.x, rect.y, { clickCount: 2 });

---

完整代码：

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();

  const page = await browser.newPage();

  await page.goto("https://www.example.com", {
    waitUntil: "domcontentloaded",
  });

  const selector = "#elementID";

  const rect = await page.evaluate((selector) => {
    const element = document.querySelector(selector);
    if (!element) return null;
    const { x, y } = element.getBoundingClientRect();
    return { x, y };
  }, selector);

  if (rect) {
    await page.mouse.click(rect.x, rect.y, { clickCount: 2 });
  } else {
    console.error("Element Not Found");
  }

  await browser.close();
})();

---

更新

您可以使用

delay

选项在两次单击之间添加延迟。下面的代码将以100ms的延迟双击元素

await page.mouse.click(rect.x, rect.y, { clickCount: 2, delay: 100 });

你可以用

---

首先获取

x

和

y

const selector = "#elementID";

const rect = await page.evaluate((selector) => {
  const element = document.querySelector(selector);
  if (!element) return null;
  const { x, y } = element.getBoundingClientRect();
  return { x, y };
}, selector);

然后将

clickCount

作为模拟双击的选项传递

await page.mouse.click(rect.x, rect.y, { clickCount: 2 });

---

完整代码：

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();

  const page = await browser.newPage();

  await page.goto("https://www.example.com", {
    waitUntil: "domcontentloaded",
  });

  const selector = "#elementID";

  const rect = await page.evaluate((selector) => {
    const element = document.querySelector(selector);
    if (!element) return null;
    const { x, y } = element.getBoundingClientRect();
    return { x, y };
  }, selector);

  if (rect) {
    await page.mouse.click(rect.x, rect.y, { clickCount: 2 });
  } else {
    console.error("Element Not Found");
  }

  await browser.close();
})();

---

更新

您可以使用

delay

选项在两次单击之间添加延迟。下面的代码将以100ms的延迟双击元素

await page.mouse.click(rect.x, rect.y, { clickCount: 2, delay: 100 });

---

它可以双击，但它的速度不像真正的人类，这就是为什么它不会触发所需的双击，最终不会在工作区中添加对象。您可以使用延迟，如

wait page.mouse.click（rect.x，rect.y，{clickCount:2，delay:100}）。在两次点击之间等待100毫秒谢谢，它让我找到了正确的方向，但结果证明这不会产生两次点击。这将创建一次单击，并将其注册为clickCount:2的单击。所以，要真正进行双击，我们需要调用page.mouse.click两次：一次使用clickCount:1，一旦使用clickCount:2和delay:100，它就会双击，但它的速度不像真正的人类，这就是为什么它不会触发所需的双击，最终不会在工作区中添加对象。你可以使用delay，比如
Wait page.mouse.click（rect.x，rect.y，{clickCount:2，delay:100}）。在两次点击之间等待100毫秒谢谢，它让我找到了正确的方向，但结果证明这不会产生两次点击。这将创建一次单击，并将其注册为clickCount:2的单击。所以，要真正进行双击，我们需要调用page.mouse.click两次：一次使用clickCount:1，一次使用clickCount:2，延迟：100