keyDown 事件覆盖粘贴事件

Question

由于我使用画布来呈现键入的文本，并且需要使用其他按键事件，例如退格键、向前删除、制表符和箭头键，因此我需要浏览器之间的兼容性以及使用按键和按键事件。当尝试使用粘贴事件时，keydown 事件优先并取消粘贴事件的发生。

一个相关的问题，但没有解决我的问题，因为我想保留 keydown 和 keypress 事件 keypress 和 keydown 优先于 Firefox 和 Safari 中的粘贴事件

我的事件监听器：

window.addEventListener('paste', pasteText);
window.addEventListener("keypress", keyPressHandler, true);
window.addEventListener("keydown", keyDownHandler, true);

function pasteText (event) {
console.log('paste');
    if(selectedLine !== ''){

        var clipboardData, pastedData;

        event.stopPropagation();
        event.preventDefault();

        clipboardData = event.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData('Text');

    }   

}

function keyPressHandler(event){

    if(selectedLine != '' && 
    $(".sp-input").is(":focus") === false && 
    $("input").is(":focus") === false){

        var key = event.keyCode;

        if (key == 13){ // Enter key

            gotoNextLineOrDeselect();                           

        }else if (key == 115 && (event.ctrlKey||event.metaKey)|| (key == 19)) {
            // this will be for modifier keys like ctrl, option and command

            event.preventDefault();
            // do stuff
        }else if(key !== 8 &&
                 key !== 9 &&  
                 key !== 37 && 
                 key !== 38 &&
                 key !== 39 && 
                 key !== 40 &&
                 key !== 46){

            key = event.charCode;

            addletter(String.fromCharCode(key));
            event.preventDefault();

        }

    }

}

function keyDownHandler(event){

    if(selectedLine != '' && 
    $(".sp-input").is(":focus") === false){

        var key = event.keyCode;
        switch(key){

            case 8:
                backspace();
                break;

            case 9: // tab

                var nextLine;

                if(selectedLine === 'line1' && lineBlankOrWhitespace('line2') === false){

                    nextLine = 'line2';

                }else if(selectedLine === 'line2' && lineBlankOrWhitespace('line3') === false){

                    nextLine = 'line3';

                }else if(selectedLine === 'line2' & lineBlankOrWhitespace('line3') || 
                         selectedLine === 'line3'){

                    nextLine = 'line1';

                }else return;



                selectLine(nextLine, false);


                textInsertIndex = textLines[selectedLine].keyHistory.length;

                setCaretXPosWithTextInsertIndex(selectedLine, 0);

                renderScreen();  

                event.preventDefault();                 

                break;

            case 37: // left arrow
                arrowOver(-1);

                event.preventDefault();
                break;

            case 39: // right arrow
                arrowOver(1);

                event.preventDefault();
                break;

            case 38: // up arrow
                var prevLine = selectedLine === 'line3' ? 'line2' : 'line1';
                if(selectedLine !== 'line1'){

                    selectLine(prevLine, false);

                    textInsertIndex = textLines[selectedLine].keyHistory.length;

                }else{

                    textInsertIndex = 0;

                }

                setCaretXPosWithTextInsertIndex(selectedLine, 0);

                renderScreen(); 

                event.preventDefault();

                break;

            case 40: // down arrow
                var nextLine = selectedLine === 'line1' ? 'line2' : 'line3';
                if(lineBlankOrWhitespace(nextLine) === false && 
                   selectedLine !== 'line3'){

                    selectLine(nextLine, false);

                }

                textInsertIndex = textLines[selectedLine].keyHistory.length;

                setCaretXPosWithTextInsertIndex(selectedLine, 0);

                renderScreen();  

                event.preventDefault();

                break;

            case 46: // forward delete key

                forwardDelete();

                break;

        }

    }

}

粘贴时，有没有办法防止触发keypress和keydown事件？

Answer 1

答案是：如果存在Default，我需要阻止它。然后我需要检查其他按键事件上的修饰键，如果按下它们则返回 false。

function pasteText (event) {

    if (event.preventDefault())
        event.preventDefault();

    console.log('paste');

}

function keyPressHandler(event){

    if (event.ctrlKey||event.metaKey) {
        return false;
    }

}

function keyDownHandler(event){

    if (event.ctrlKey||event.metaKey) {
        return false;
    }

}