如何劫持网页中的esc功能

leshui

各位大佬好，我在研究一个react网页中的esc，这个网页的输入框在按下esc后自动关闭，所以导致输入法打错字按下esc后会直接关闭输入框然后丢失文本。我希望的是劫持esc功能，而不是更改文本框的消失功能。
我用添加了如下的脚本，希望劫持住esc的事件

window.addEventListener("keydown",function(event){
  if(event.key=='escape'){
    console.log('this is esc')
    event.stopImmediatePropagation()
    event.stopPropagation()
    event.preventDefault()
    console.log('应该被取消了')
  }
})

document.addEventListener("keydown",function(event){
  if(event.key=='escape'){
    console.log('this is esc')
    event.stopImmediatePropagation()
    event.stopPropagation()
    event.preventDefault()
    console.log('应该被取消了')
  }
})

但是没有用，这个keydown还是在继续传播

图中的这一段代码是在react的里面，是个window.addEventListener
但是我把网页中的所有keydown、keyup、keypress事件都删除后，还是可以用esc取消文本框。
更绝的是我把除了必要的click之外的事件全删除了，它还是可以用esc取消文本框。

steven026

代码应该没啥问题，可能是条件写错了
event.key=='escape' 改成 event.key=='Escape'

leshui

本帖最后由 leshui 于 2023-11-10 17:27 编辑

代码应该没啥问题，可能是条件写错了
event.key=='escape' 改成 event.key=='Escape'
![image.png] ...[/quote]
我改了大写的Escape，还是不行，最奇怪的是我把网页里所有的listener都删除之后，还是可以关闭文本/p>

leshui

steven026 发表于 2023-11-10 16:42
[md]代码应该没啥问题，可能是条件写错了
`event.key=='escape'` 改成 `event.key=='Escape'`
![image.png] ...

我在想
1、是不是react自己实现了一个event的传播途径，listener不管用。
2、这个网页使用了什么标记，定时轮询这个标记在不在来实现关闭网页。
这个网页还是算是大厂的，应该不是2那个那么扯的方式。

steven026

leshui 发表于 2023-11-10 17:29
我在想
1、是不是react自己实现了一个event的传播途径，listener不管用。
2、这个网页使用了什么标记，定 ...

有可能是事件监听注册在具体元素上而不是全局
这种只能发网址具体调试了，可能性太多了

cxxjackie

阻断事件传播必须将addEventListener的第三个参数设置为true，以使其在捕获阶段阻断，默认的冒泡阶段事件已经传播完了：
https://developer.mozilla.org/zh ... et/addEventListener