javascript 事件stopPropagation不会停止传播

wrrgggsh 于 2023-04-28 发布在 Java

关注(0)|答案(1)|浏览(103)

我正在开发一个chrome扩展，我在Notion页面上创建了一个context script。
如果用户专注于上下文脚本内的输入并点击退格键/删除，则输入中的字符将与概念页面上的内容一起删除。我通过添加onKeyDown处理程序解决了这个问题：

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

现在，如果用户专注于上下文脚本中的输入并点击backspace/delete，则仅删除输入值。
我遇到了另一个问题，即无法通过按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()
  }
}

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

JavaScript

来源：https://stackoverflow.com/questions/76110970/event-stoppropagation-doesnt-stop-propagation

1条答案

按热度按时间

kmbjn2e31#

这可能是因为Notion正在侦听paste事件，所以请尝试也为paste事件侦听stopPropagation。
工作示例：

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

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 事件stopPropagation不会停止传播

1条答案

相关问题

热门标签

最新问答