Question

我需要在React中模拟一个 real 鼠标单击。一种会导致任何具有焦点的输入都接收到通常的后续事件（例如，更改，模糊等）。

我使用的是以下内容，但事件流与真正的鼠标单击不同（例如，模拟的点击不会导致焦点模糊的输入）：

const mouseClickEvents = ['mousedown']; //, 'click', 'mouseup'];
function simulateClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
        view: window,
        bubbles: true,
        cancelable: true,
        buttons: 1
      })
    )
  );
}

class C1 extends Component {
. . .
onMouseDown(e) {
  // simulate click on C2
  if (myConditionForSimulatingClick) {
    simulateClick(document.getElementsByClassName('c2')[0]);
    return;
  }
  . . .
}
. . .
}

如果某个组件上的输入具有焦点，而我确实单击了C2（它没有单击处理程序），则输入会更改并模糊事件。

但是，如果相同的输入具有焦点，并且我单击了C1，则模拟事件将使其直达C1，但没有发生其他任何事情（在我实际单击应用程序中的其他位置之前，输入不会接收任何事件）。这就是我需要的：即使执行了模拟单击，也需要更改和模糊具有焦点的元素。这可能吗？

我曾尝试停止传播并阻止C1 mousedown事件的默认设置，但两者（甚至一起）都没有改变。

有人可以帮忙吗？

在React中模拟真实的鼠标点击

0 个答案: