在Next.js组件中使用外部JS触发点击事件的问题

Next.js基于React构建，其组件的事件处理依赖React合成事件体系，并非直接绑定在DOM元素上，所以单纯调用DOM的click()或普通MouseEvent往往无法触发内部逻辑。以下是几种可行的解决方法：

方法1：获取React组件实例并调用处理函数 #

React会将组件实例与DOM元素关联，可通过DOM元素的内部属性拿到组件的fiber节点，进而找到点击处理函数：

// 选中目标DOM元素
const el = document.querySelector('some-selector');
// 获取fiber节点（不同React版本属性名可能有差异，比如__reactInternalInstance$xxx）
const fiber = el.__reactFiber$ || el.__reactInternalInstance$;
// 从memoizedProps中提取点击处理函数
const onClickHandler = fiber.memoizedProps.onClick;
// 调用处理函数，需绑定组件上下文时用call/apply
if (onClickHandler) {
  onClickHandler.call(fiber.stateNode);
}

注意：该方法依赖React内部实现，不同版本可能失效，仅适合调试场景。

方法2：模拟完整的鼠标交互序列 #

部分组件会监听完整的鼠标流程（mousedown→mouseup→click），仅触发click无法满足要求，可模拟整个事件链：

const el = document.querySelector('some-selector');

// 模拟鼠标按下
el.dispatchEvent(new MouseEvent('mousedown', {
  bubbles: true,
  cancelable: true,
  view: window,
  buttons: 1 // 代表左键点击
}));

// 模拟鼠标抬起
el.dispatchEvent(new MouseEvent('mouseup', {
  bubbles: true,
  cancelable: true,
  view: window,
  buttons: 1
}));

// 最后模拟点击
el.dispatchEvent(new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
}));

很多依赖交互状态的组件（如防误触、状态切换组件）需要完整事件链才能触发逻辑。

方法3：直接操作组件状态（若可访问） #

如果组件用useState或useReducer管理状态，可通过fiber节点找到状态更新函数直接调用：

const el = document.querySelector('some-selector');
const fiber = el.__reactFiber$;
// 提取状态更新函数（不同版本存储位置可能不同，比如memoizedState.dispatch）
const dispatch = fiber.memoizedState?.dispatch;
// 假设是布尔值状态，直接切换
if (dispatch) {
  dispatch(prev => !prev);
}

该方法需要对React内部状态结构有一定了解，适合简单的状态切换场景。

针对耐克官网示例的测试 #

以耐克官网的.swoosh元素为例，可先尝试方法2的完整事件序列：

const swoosh = document.querySelector('.swoosh');
swoosh.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, view: window, buttons: 1 }));
swoosh.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, view: window, buttons: 1 }));
swoosh.dispatchEvent(new MouseEvent('click', { bubbles: true, view: window }));

内容的提问来源于stack exchange，提问作者JBrown