js & 快捷键 & vue bind bug

js & 快捷键 & vue bind bug

how to prevent addEventListener bind many times

solution

dataset & once flag

// flag

// shortcut keys
keyboardShortcutKeys() {
    let that = this;
    let body = document.querySelector(`body`);
    let bindFlag = body.dataset.bindFlag;
    // console.log(`bindFlag =`, bindFlag);
    if (bindFlag === "true") {
        console.log(`only need binding once!`);
    } else {
        body.dataset.bindFlag = "true";
        // bind once
        body.addEventListener("keyup", function(e) {
            let key = e.which || e.keyCode;
            if(e.which === 17) {
                // init
                this.isCtrlPressed = false;
            }
        });
        body.addEventListener("keydown", function(e) {
            let key = e.which || e.keyCode;
            if(e.which === 17) {
                this.isCtrlPressed = true;
            }
            let isCtrl = this.isCtrlPressed;
            if(e.which === 83 && isCtrl) {
                console.log(`you pressed Ctrl + S`);
                if (that.onClickButton) {
                    that.onClickButton(`save`);
                } else {
                    console.log(`typeof(that.onClickButton) =`, typeof(that.onClickButton));
                    console.log(`typeof(that.xyz) =`, typeof(that.xyz));
                }
            }
            if(e.which === 68 && isCtrl) {
                console.log(`you pressed Ctrl + D`);
                if (that.clickGetNewsInfos) {
                    that.clickGetNewsInfos(`prev`);
                }
            }
            if(e.which === 70 && isCtrl) {
                console.log(`you pressed Ctrl + F`);
                if (that.clickGetNewsInfos) {
                    that.clickGetNewsInfos(`next`);
                }
            }
            if(e.which === 88 && isCtrl) {
                console.log(`you pressed Ctrl + X`);
                if (that.clickShowResureModal) {
                    that.clickShowResureModal(`passed`);
                }
            }
        });
    }
},

    // shortcut keys
    keyboardShortcutKeys() {
        let that = this;
        let body = document.querySelector(`body`);
        let bindFlag = body.dataset.bindFlag;
        // console.log(`bindFlag =`, bindFlag);
        if (bindFlag === "true") {
            console.log(`only need binding once!`);
        } else {
            body.dataset.bindFlag = "true";
            // bind once
            body.addEventListener("keyup", function(e) {
                let key = e.which || e.keyCode;
                if(e.which === 17) {
                    // init
                    this.isCtrlPressed = false;
                }
            });
            body.addEventListener("keydown", function(e) {
                let key = e.which || e.keyCode;
                if(e.which === 17) {
                    this.isCtrlPressed = true;
                }
                let isCtrl = this.isCtrlPressed;
                if(e.which === 83 && isCtrl) {
                    console.log(`you pressed Ctrl + S`);
                    if (that.onClickButton) {
                        that.onClickButton(`save`);
                    }
                }
                if(e.which === 68 && isCtrl) {
                    console.log(`you pressed Ctrl + D`);
                    if (that.clickGetNewsInfos) {
                        if (!that.isFirstNews) {
                            that.clickGetNewsInfos(`prev`);
                        } else {
                            // btn bug
                            console.log(`prev btn bug!`);
                        }
                    }
                }
                if(e.which === 70 && isCtrl) {
                    console.log(`you pressed Ctrl + F`);
                    if (that.clickGetNewsInfos) {
                        if (!that.isLastNews) {
                            that.clickGetNewsInfos(`next`);
                        } else {
                            // btn bug
                            console.log(`next btn bug!`);
                        }
                    }
                }
                if(e.which === 88 && isCtrl) {
                    console.log(`you pressed Ctrl + X`);
                    if (that.clickShowResureModal) {
                        that.clickShowResureModal(`passed`);
                    }
                }
            });
        }
    },

---

bug

快捷键，与浏览器自带的冲突了

1. 保存CTRL + Alt + S；上一条CTRL + Alt + D；下一条CTRL + Alt + F；处理通过CTRL + Alt + X ， windows 可以正常使用

1. 保存CTRL+S；上一条CTRL+D；下一条CTRL+F；处理通过CTRL+X， MacOS 可以正常使用

https://codepen.io/webgeeker/full/YBPBOV