鼠标类

鼠标类在视窗左上角相对于主框架 CSS 像素操作。

签名：

export declare abstract class Mouse

备注

每个 page 对象都有自己的鼠标，可以通过 [page.mouse](#pagemouse) 访问。

此类的构造函数被标记为内部。第三方代码不应直接调用构造函数或创建扩展 Mouse 类的子类。

示例 1

// Using ‘page.mouse’ to trace a 100x100 square.
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.move(100, 100);
await page.mouse.move(100, 0);
await page.mouse.move(0, 0);
await page.mouse.up();

注意：鼠标事件会触发合成MouseEvent。这意味着它不能完全复制普通用户使用鼠标所能做到的所有功能。

例如，使用page.mouse无法实现拖动和选择文本。相反，您可以使用平台中实现的`DocumentOrShadowRoot.getSelection()`功能。

示例 2

例如，如果您想选择节点之间的所有内容

await page.evaluate(
  (from, to) => {
    const selection = from.getRootNode().getSelection();
    const range = document.createRange();
    range.setStartBefore(from);
    range.setEndAfter(to);
    selection.removeAllRanges();
    selection.addRange(range);
  },
  fromJSHandle,
  toJSHandle
);

如果您随后想复制粘贴您的选择，您可以使用剪贴板 API

// The clipboard api does not allow you to copy, unless the tab is focused.
await page.bringToFront();
await page.evaluate(() => {
  // Copy the selected content to the clipboard
  document.execCommand('copy');
  // Obtain the content of the clipboard as a string
  return navigator.clipboard.readText();
});

注意：如果您想访问剪贴板 API，您必须授予其访问权限。

await browser
  .defaultBrowserContext()
  .overridePermissions('<your origin>', ['clipboard-read', 'clipboard-write']);

方法

方法	修饰符	描述
click(x, y, options)		mouse.move、mouse.down 和 mouse.up 的快捷方式。
down(options)		按下鼠标。
drag(start, target)		分派一个drag事件。
dragAndDrop(start, target, options)		依次执行拖动、dragenter、dragover 和 drop。
dragEnter(target, data)		分派一个dragenter事件。
dragOver(target, data)		分派一个dragover事件。
drop(target, data)		依次执行 dragenter、dragover 和 drop。
move(x, y, options)		将鼠标移动到给定的坐标。
reset()		将鼠标重置为默认状态：没有按钮按下；位置在 (0,0)。
up(options)		释放鼠标。
wheel(options)		分派一个mousewheel事件。