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

我正在注入一些代码，将文本输入到互联网上的现有页面中

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

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

  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}
          />

keyUp=event=>{
event.preventDefault（）；
event.nativeEvent.stopImmediatePropagation（）；
event.stopPropagation（）；
返回false；
};

---

是否有一种方法可以防止此事件在主体上触发，而不是首先在我的元素中触发？

React默认情况下将其事件侦听器附加到

body

，并使用它来触发自己的

SyntheticEvent

您可以尝试在捕获模式下通过将

capture

附加到事件名称来附加事件，如所述

编辑（添加以澄清评论）： 将事件附加到窗口：

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' />
...

。。。
...

我在

窗口

级别添加了一个侦听器，用于捕获事件并防止向下传播。当然，如果已在

窗口

级别添加了侦听器，则这将不起作用：

window.addEventListener("keydown", this.keyDown, true);

---

这回答了你的问题吗？

捕获

事件阶段从每个规范的顶部开始，因此它总是从

窗口

流经文档、正文等。我可以防止捕获事件被触发吗？问题是，这仍然会触发页面上先前存在的事件，所以我猜它在树上的位置高于我的元素。有没有办法解决这个问题？你能检查一下在捕获模式下附加的事件是否被触发了吗？如果没有，您可能需要在捕获模式下在

窗口上手动附加事件，并通过分配
id
将其连接到您的元素，并检查
event.target.id
在您的事件处理程序中是否匹配。连接是什么意思？我最终确实在
窗口
级别捕获了事件，但我想防止它触发其他处理程序，而只触发元素的