为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕妹3146593 2019-02-26 16:27:51
先描述下出现问题的场景,使用react在组件componentDidMount时添加监听事件 window.addEventListener('keydown', this.handleKeyDown);当组件销毁时移除这个监听事件。键盘事件处理是在input框聚焦时,判断是否按下了“backspace”键时,如果这个input框内有值,则会先删除,当没有值时,继续按下“backspace”,将会执行某个函数,贴出如下代码:按下“backspace”后里面执行的这个函数的作用在这里和我要问的问题没什么太大关系,我就不详细说了;接下来问题来了,按下了“backspace”后,先是把input内的值删除了,在谷歌、火狐等浏览器里没有值以后会执行这里面的函数,不会有其他操作;然后到了IE里面,这个input框没有值的时候,然后再按一下就会把页面给回退了,这里面的函数执行了也看不到。求大神们有没有什么方法可以阻止IE页面回退。第一次提问题,如果大家觉得问题描述不够清楚可以留言继续问我,我尽量解释解释。烦请各位大神多多指导~谢谢!!
查看完整描述

1 回答

?
慕尼黑5688855

TA贡献1848条经验 获得超2个赞

问题解决了,我在处理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

        }

    }

}


查看完整回答
反对 回复 2019-03-06
  • 1 回答
  • 0 关注
  • 527 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号