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

先描述下出現(xiàn)問(wèn)題的場(chǎng)景，使用react在組件componentDidMount時(shí)添加監(jiān)聽(tīng)事件 window.addEventListener('keydown', this.handleKeyDown)；當(dāng)組件銷(xiāo)毀時(shí)移除這個(gè)監(jiān)聽(tīng)事件。
鍵盤(pán)事件處理是在input框聚焦時(shí)，判斷是否按下了“backspace”鍵時(shí)，如果這個(gè)input框內(nèi)有值，則會(huì)先刪除，當(dāng)沒(méi)有值時(shí)，繼續(xù)按下“backspace”，將會(huì)執(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ù)的作用在這里和我要問(wèn)的問(wèn)題沒(méi)什么太大關(guān)系，我就不詳細(xì)說(shuō)了；接下來(lái)問(wèn)題來(lái)了，按下了“backspace”后，先是把input內(nèi)的值刪除了，在谷歌、火狐等瀏覽器里沒(méi)有值以后會(huì)執(zhí)行這里面的函數(shù)，不會(huì)有其他操作；然后到了IE里面，這個(gè)input框沒(méi)有值的時(shí)候，然后再按一下就會(huì)把頁(yè)面給回退了，這里面的函數(shù)執(zhí)行了也看不到。

求大神們有沒(méi)有什么方法可以阻止IE頁(yè)面回退。

第一次提問(wèn)題，如果大家覺(jué)得問(wèn)題描述不夠清楚可以留言繼續(xù)問(wèn)我，我盡量解釋解釋。
煩請(qǐng)各位大神多多指導(dǎo)~謝謝?。?/p>

回答

編輯回答

哚蕾咪

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

2018年8月21日 20:01

編輯回答

有點(diǎn)壞

問(wèn)題解決了，我在處理backspace的時(shí)候，加阻止冒泡，同時(shí)返回false來(lái)禁止執(zhí)行，重點(diǎn)是這個(gè)false來(lái)起作用。。。結(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