事件停止传播不会停止传播

Question

我正在开发一个 chrome 扩展，我在 Notion 页面上创建了一个 context script。

如果用户专注于上下文脚本中的输入并点击退格键/删除，输入中的字符将被删除，并带有概念页面上的内容。我通过添加

onKeyDown

处理程序解决了这个问题：

export const onKeyDown = (evt: React.KeyboardEvent) => {
  if (evt.key === 'Backspace') {
    evt.stopPropagation()
  }
}

现在，如果用户专注于上下文脚本中的输入并点击退格键/删除，则仅删除输入值。

当无法通过按 Ctrl+V 或 Cmd+V 将文本粘贴到输入中时，我遇到了另一个问题。当用户专注于上下文脚本中的输入并按下 Ctrl+V 或 Cmd+V 时，文本将被粘贴到概念页面而不是聚焦输入中。我试图通过添加来解决这个问题：

export const onKeyDownDefault = (evt: React.KeyboardEvent) => {
  if (evt.key === 'Backspace') {
    evt.stopPropagation()
  }
  // Ctrl+V or Cmd+V pressed?
  if ((evt.ctrlKey || evt.metaKey) && evt.keyCode == 86) {
    console.log('stop propagate')
    evt.stopPropagation()
    // evt.preventDefault()
  }
}

但是没有用。我可以看到控制台输出“停止传播”，但文本没有粘贴到输入中。

Answer 1

可能是因为 Notion 正在监听

paste

事件，尝试也

stopPropagation

代替

paste

事件。

工作示例：

<input type="text" id="input" />
<script>
  document.addEventListener('paste', (event) => {
    console.log((event.clipboardData || window.clipboardData).getData('text'));
  });
  const elInput = document.getElementById('input');
  elInput.addEventListener('keydown', (ev) => ev.stopPropagation());
  elInput.addEventListener('paste', (ev) => ev.stopPropagation());
</script>

非工作示例：

<input type="text" id="input" />
<script>
  document.addEventListener('paste', (event) => {
    console.log((event.clipboardData || window.clipboardData).getData('text'));
  });
  const elInput = document.getElementById('input');
  elInput.addEventListener('keydown', (ev) => ev.stopPropagation());
</script>