Question

由于我使用canvas来呈现键入的文本并需要使用其他键事件，如退格键，转发删除键，制表符和箭头键，我需要浏览器之间的兼容性以及使用keypress和keydown事件。尝试使用粘贴事件时，keydown事件优先，并取消粘贴事件的发生。

一个相关的问题，但由于我想同时保留keydown和keypress事件，因此无法解决我的问题 keypress and keydown take priority over paste event in 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;

        }

    }

}

粘贴时，是否有办法防止按键和键控事件被触发？

Answer 1

答案是：如果存在，我需要阻止默认。然后我需要检查其他键事件的修饰键，如果按下则返回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;
    }

}

keyDown事件覆盖粘贴事件

1 个答案: