IE下用react添加keydown事件 backspace按鍵會導(dǎo)致頁面回退

先描述下出現(xiàn)問題的場景，使用react在組件componentDidMount時(shí)添加監(jiān)聽事件 window.addEventListener('keydown', this.handleKeyDown)；當(dāng)組件銷毀時(shí)移除這個(gè)監(jiān)聽事件。
鍵盤事件處理是在input框聚焦時(shí)，判斷是否按下了“backspace”鍵時(shí)，如果這個(gè)input框內(nèi)有值，則會先刪除，當(dāng)沒有值時(shí)，繼續(xù)按下“backspace”，將會執(zhí)行某個(gè)函數(shù)，貼出如下代碼:

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”后里面執(zhí)行的這個(gè)函數(shù)的作用在這里和我要問的問題沒什么太大關(guān)系，我就不詳細(xì)說了；接下來問題來了，按下了“backspace”后，先是把input內(nèi)的值刪除了，在谷歌、火狐等瀏覽器里沒有值以后會執(zhí)行這里面的函數(shù)，不會有其他操作；然后到了IE里面，這個(gè)input框沒有值的時(shí)候，然后再按一下就會把頁面給回退了，這里面的函數(shù)執(zhí)行了也看不到。

求大神們有沒有什么方法可以阻止IE頁面回退。

第一次提問題，如果大家覺得問題描述不夠清楚可以留言繼續(xù)問我，我盡量解釋解釋。
煩請各位大神多多指導(dǎo)~謝謝！！

回答

編輯回答

哚蕾咪

可能是要停止原生事件的冒泡吧，IE和其他瀏覽器的事件處理模型是不一樣的

2018年8月21日 20:01

編輯回答

有點(diǎn)壞

問題解決了，我在處理backspace的時(shí)候，加阻止冒泡，同時(shí)返回false來禁止執(zhí)行，重點(diǎn)是這個(gè)false來起作用。。。結(jié)果就好了，，，了。。。。。。。
這樣就把IE默認(rèn)自帶的回退按鍵禁止了。。。
更新代碼如下
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
        }
    }
}

2018年1月31日 22:04