最近碰到一个奇怪的问题,请大手子看一下
repro: https://codepen.io/niaodan2b/pen/drxQBw
步骤:把光标放在 input 里,然后关闭 dialog,然后点击页面空白处,会在控制台看到报错
按我的理解,dialog 关闭的时候,组件就销毁了,此时应该会自动解除内部元素的 v-on:blur 吧?为什么点击页面空白处还会触发呢?
1
keepeye 2019-03-29 15:50:13 +08:00
Note: Document.activeElement 的值随浏览器的不同而不同 (bug 452307): IE10 把值设为焦点将要移向的对象 , 而 Firefox 和 Chrome 往往把值设为 body .
https://developer.mozilla.org/zh-CN/docs/Web/Events/blur |
2
shintendo OP @keepeye
没懂,是说关闭 dialog 后焦点移到了 body 吗?我的意思是关闭 dialog 之后这个 blur 事件为什么依旧存在呢? |
3
dixeran 2019-03-29 16:33:06 +08:00
chrome 72 有报错,FF 67 没有..
|
4
keepeye 2019-03-29 18:08:46 +08:00
@shintendo
我猜 js 怎么知道你 blur 了呢?是不是依靠你点击了 input 的之外的地方?是不是相当于 $("body").onclick 呢?你移除了 input 但是点击事件还在 body 上。 |
5
noe132 2019-03-29 20:01:06 +08:00
不是 Vue 也不是 dialog 的问题。
理论上 input 销毁后只会触发一次 blur。 chrome 的表现是 blur 后强行 focus,结果元素不存在继续触发 blur,又强行 focus 因为 vue 是异步渲染的,所以只会有一次报错。我手写了段同步渲染的代码,会导致 chrome 爆栈。 目测是 chrome 在销毁 input 时的 bug https://paste.ubuntu.com/p/G5nys4wWgR/ 打开一个空页面运行这个 run 函数 点击获取焦点再点外面失去焦点 同步删除 chrome 会爆栈,异步删除 chrome 会出现你的例子一样的错误 firefox 和 edge 表现正常 目测应该给 chromium 提 issue 建议不要再 blur 里写 focus,或者先判断一下 |