鍍金池/ 問答/數(shù)據(jù)庫  網(wǎng)絡(luò)安全  HTML/ IE下用react添加keydown事件 backspace按鍵會導(dǎo)致頁面回退

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

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

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

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

回答
編輯回答
哚蕾咪

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

2018年8月21日 20:01
編輯回答
有點壞

問題解決了,我在處理backspace的時候,加阻止冒泡,同時返回false來禁止執(zhí)行,重點是這個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