javascript - React - 按键事件首先在主体上触发，然后在元素上触发

Question

我正在注入(inject)一些代码，这些代码会在互联网上的现有页面中创建文本输入。

在某些网站上，当用户在专注于我的文本输入时按下某些特定键时，事件将被捕获而不是冒泡。

我一直在尝试多种解决方案来防止这种情况，但它们似乎不起作用:

  keyUp = event => {
    event.preventDefault();
    event.nativeEvent.stopImmediatePropagation();
    event.stopPropagation();
    return false;
  };

<Form.Control
            as="textarea"
            onChange={this.updateInput}
            onKeyUp={this.keyUp}
            onKeyPress={this.keyUp}
            onKeyDown={this.keyUp}
          />

有没有办法可以阻止此事件在主体上触发，而不是首先在我的元素中触发？

Answer 1

React 默认将其事件监听器附加到 body 上，并使用它来触发自己的 SyntheticEvent

您可以尝试通过将 Capture 附加到事件名称来以捕获模式附加事件，如 here 所述。

编辑(添加以澄清评论):将事件附加到您的窗口:

window.addEventListener("keydown", function (evt) {
  if (evt.target.id === 'elementID') {
    //do what you want to, here.
    //if you want to prevent the event propagating:
    evt.stopImmediatePropagation();
    evt.stopPropagation();
  }
}, true);

在你的jsx中:

...
<input id='elementID' />
...