IE下用react添加keydown事件 backspace按键会导致页面回退

发布于 2022-09-06 09:57:58 字数 1265 浏览 53 评论 0

先描述下出现问题的场景,使用react在组件componentDidMount时添加监听事件 window.addEventListener('keydown', this.handleKeyDown);当组件销毁时移除这个监听事件。
键盘事件处理是在input框聚焦时,判断是否按下了“backspace”键时,如果这个input框内有值,则会先删除,当没有值时,继续按下“backspace”,将会执行某个函数,贴出如下代码:

handleKeyDown (e) {
        if (document.activeElement.className === 'search-input') {
            let cursorPosition = this.props.cursorPosition
            switch (e.keyCode) {
            case KeyCodeMap.BACK_SPACE:
            case KeyCodeMap.DELETE:
                if (this.autoComplete.isEmpty() && cursorPosition >= 0) {
                    this.props.onHandleDeleteSelect(cursorPosition)
                }
                break

            case KeyCodeMap.LEFT:
                XXXXXXX
                XXXXXXX
                break

            case KeyCodeMap.RIGHT:
                XXXXXXX
                XXXXXXX
                break
            default:
                break
            }
        }
    }

按下“backspace”后里面执行的这个函数的作用在这里和我要问的问题没什么太大关系,我就不详细说了;接下来问题来了,按下了“backspace”后,先是把input内的值删除了,在谷歌、火狐等浏览器里没有值以后会执行这里面的函数,不会有其他操作;然后到了IE里面,这个input框没有值的时候,然后再按一下就会把页面给回退了,这里面的函数执行了也看不到。

求大神们有没有什么方法可以阻止IE页面回退。

第一次提问题,如果大家觉得问题描述不够清楚可以留言继续问我,我尽量解释解释。
烦请各位大神多多指导~谢谢!!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

眼藏柔 2022-09-13 09:57:58

问题解决了,我在处理backspace的时候,加阻止冒泡,同时返回false来禁止执行,重点是这个false来起作用。。。结果就好了,,,了。。。。。。。
这样就把IE默认自带的回退按键禁止了。。。
更新代码如下
handleKeyDown (e) {

    if (document.activeElement.className === 'search-input') {
        let cursorPosition = this.props.cursorPosition
        switch (e.keyCode) {
        case KeyCodeMap.BACK_SPACE:
        case KeyCodeMap.DELETE:
            if (this.autoComplete.isEmpty() && cursorPosition >= 0) {
                this.props.onHandleDeleteSelect(cursorPosition)
            }

if (this.autoComplete.isEmpty() && e.keyCode === KeyCodeMap.BACK_SPACE) {

                e.preventDefault()
                e.stopPropagation()
                return false
            }
            break

        case KeyCodeMap.LEFT:
            XXXXXXX
            XXXXXXX
            break

        case KeyCodeMap.RIGHT:
            XXXXXXX
            XXXXXXX
            break
        default:
            break
        }
    }
}
何以笙箫默 2022-09-13 09:57:58

可能是要停止原生事件的冒泡吧,IE和其他浏览器的事件处理模型是不一样的

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文