教你如何解决IE9的输入框input事件无法监听右键菜单的剪切、撤销、删除对内容的改变的问题

4次阅读

共计 1044 个字符，预计需要花费 3 分钟才能阅读完成。

文章起因
看 Vue 源代码内置指令时，发现了 Vue 对于 IE9 的 selectionchange 事件做了特殊处理，这引起了我的兴趣。原来 Vue 对全局的 selectionchange 事件进行监听，一旦发现就会尝试触发 document.activeElement 当前文档激活对象的 input 事件。具体代码如下：
src/core/util/env.js
export const inBrowser = typeof window !== ‘undefined’
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE = UA && /msie|trident/.test(UA)
export const isIE9 = UA && UA.indexOf(‘msie 9.0’) > 0
src/platforms/web/runtime/directives/model.js
if (isIE9) {
document.addEventListener(‘selectionchange’, () => {
const el = document.activeElement
if (el && el.vmodel) {
trigger(el, ‘input’)
}
})
}
function trigger (el, type) {
const e = document.createEvent(‘HTMLEvents’)
e.initEvent(type, true, true)
el.dispatchEvent(e)
}
为什么要这样兼容
原来 IE9 输入框 input 事件无法监听到键盘的 backspace 键和 delete 键对内容的改变，以及右键菜单的剪切、撤销、删除对内容的改变，用 keyup 事件我们可以解决键盘 backspace 键 delete 键的问题，但是对于右键对于文本的操作还是无能为力，还好有 selectionchange 事件，它可以在文档上的当前文本选择被改变时触发，例如文本选择、剪切、删除、粘贴等操作。
selectionchange 事件需要注意的点