从浏览器控制台触发reactjs事件？

Question

我正在构建一个书签来自动在我的浏览器上执行操作。我试图使其工作的网站（我不控制网站的源代码）有一些元素在鼠标（或指针）悬停时会发生变化，并且我试图触发该状态更改。

主要问题（我认为）是该网站基于reactjs，因此它有自己的一组处理程序。

我尝试了多种方法来以编程方式触发悬停事件，但到目前为止没有任何效果：

• 强制更改浏览器的状态（使用

  Force state -> hover

  ）
• 创建自定义事件，然后调度它。

当监视网站上的事件时，即使进行过滤，我似乎也无法找到哪个元素实际上触发了事件（该网站与所有 React 网站一样，有一个严重嵌套的 React DOM）。

Answer 1

你可以模拟原生的 mouseenter 事件，因为 React 的合成事件系统仍然监听这些事件：

const element = document.querySelector('your-selector-here');
const hoverEvent = new MouseEvent('mouseenter', {
  bubbles: true,
  cancelable: true,
  view: window
});

element.dispatchEvent(hoverEvent);

React 处理诸如

mouseenter

之类的本机事件及其合成事件。通过分派此事件，您应该触发网站上任何与悬停相关的更改。使用浏览器的开发工具找到确切的元素并根据需要修改选择器。