Question

下午或早上好，取决于您所在的位置。
我有一个简单的JQuery脚本，使用mousetrap.js库（http://craig.is/killing/mice）来阻止一组键。此代码在Chrome中运行良好，我怀疑它也适用于Firefox。这是因为没有为我的一组键定义事件cancelBubble，stopPropagation和preventDefault。 F5只是大约10-15个键中的一个。如果有必要，我可以提供我希望锁定的完整数组。我试图使用JQuery.event.fix（e），但这不起作用，事件仍然被解雇。你有没有人遇到过这个问题或类似的问题，如果有人能帮我解决这个问题，我会很高兴为了清楚起见，我使用的是IE版本8.0.7601.17514，并且更新没有问题（不幸的是），因为这是一台企业计算机，我们的系统要求我们阻止密钥。
提前致谢！

$(document).ready(function() {
    Mousetrap.bind(['f5'], function(e) {
        if(e.cancelBubble) e.cancelBubble = true;
        if(e.stopPropagation) e.stopPropagation();
        if(e.preventDefault) e.preventDefault();
    });
});

Answer 1

我找到了解决问题的方法。它使用普通的旧Javascript完成，并且应该与大多数浏览器兼容。如果没有，请随时报告。

/**
 * addKeyActions takes an array of objects that looks like this:
 * 
 * {
 *  keyCodes: [120], //F9
 *  modifiers: ['ctrlKey', 'shiftKey', 'altKey', 'altGraphKey', 'metaKey'], //Only legal modifiers
 *  callback: function(event){};
 * }
 * 
 * A good resource to find the keycodes you are looking for is:
 * http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
 * 
 * However, there are more keycodes than written on this page, so if you can't find what you are looking for, 
 * I have provided a function that you can call to display the keycode for the current button pressed - alertKeyCodes
 * 
 * 
 * @Version 1.01
 */


/*
 * --HOW TO USE--
 * 
var allModifiersKeys = {
  keyCodes: [120, 121], //F9, F10
  modifiers: ['ctrlKey', 'shiftKey', 'altKey'],
  callback: function(event){alert("All modifiers pressed + Function-button!");}
};

var altKeys = {
  keyCodes: [122, 123], //F11, F12
  modifiers: ['altKey'],
  callback: function(event){alert("ALT pressed + Function-button!");}
};

var shiftCtrlKeys = {
  keyCodes: [116, 117], //F5, F6
  modifiers: ['ctrlKey', 'shiftKey'],
  callback: function(event){alert("CTRL+SHIFT+Function-button pressed!");}
};

var noModifierKeys = {
  keyCodes: [118, 119], //F7, F8
  callback: function(event){preventDefaultEventPropagation(); alert("Function-button!");} //Do not forget to also declare the preventDefaultEventPropagation-function 
  //that is listed below for this example to work
};

addKeyActions([allModifiersKeys, altKeys, shiftCtrlKeys, noModifierKeys]);

*/

function addKeyActions(key){

    document.onkeydown = function(){
        var matchingKeyCode = findMatchingKeyCode();
        var match = matchModifiers(matchingKeyCode);
        if(match){
            matchingKeyCode.callback(event);
        }
    };

    function findMatchingKeyCode(){
        var eventKeyCode = event.keyCode || event.which || event.charCode;
        var returnVal;
        for(var i=0; i<key.length; i++){
            var tempKey = key[i];
            var containsKeyCode = isValueInArray(eventKeyCode, tempKey.keyCodes);
            if(containsKeyCode){
                returnVal = tempKey;
            }
        }
        return returnVal;
    }

    function isValueInArray(value, array){
        var hasValue = false;
        for(var i=0; i < array.length; i++){
            var tempValue = array[i];
            if(tempValue === value){
                hasValue = true;
            }
        }
        return hasValue;
    }

    function matchModifiers(key){
        var match = false;
        if(key != undefined){
            match = true;
            if(key.modifiers instanceof Array){
                for(var i=0; i<key.modifiers.length; i++){
                    var modifier = key.modifiers[i];
                    match = match && event[modifier];   
                }
            }
        }
        return match;
    }
}

/**
 * Useful callbacks/functions are listed below 
 */
function preventDefaultEventPropagation(){

    if(event.cancelBubble) event.cancelBubble = true;
    if(event.stopPropagation) event.stopPropagation();
    if(event.preventDefault) event.preventDefault();

    event.returnValue = false;
    event.keyCode = 0;
    return false;
}

/**
 * Useful methods during developement 
 */
function alertKeyCodes(){
    document.onkeydown = function(){
        alert(event.keyCode || event.which || event.charCode);
        if(event.cancelBubble) event.cancelBubble = true;
        if(event.stopPropagation) event.stopPropagation();
        if(event.preventDefault) event.preventDefault();

        event.returnValue = false;
        event.keyCode = 0;
        return false;
    };
}

请注意，函数的定义和使用位置位于2个单独的文件中。一个是从文档就绪和上面的定义开始的调用。

$(document).ready(function() {
        var SingleKeys = {
            keyCodes: [114, 116, 121, 122], //F3, F5, F10, F11
            callback: function(event){return preventDefaultEventPropagation();}
        };

        var BackspaceKeys = {
            keyCodes: [8], //Backspace
            callback: function(event){
                var sourceOfEvent = event.target || event.srcElement;
                if(sourceOfEvent.tagName == "BODY"){
                    return preventDefaultEventPropagation();
                }
            }
        };
        var EnterKeys = {
                keyCodes: [13], //Enter
                callback: function(event){
                    var sourceOfEvent = event.target || event.srcElement;
                    if(sourceOfEvent.tagName == "BODY"){
                        return preventDefaultEventPropagation();
                    }
                    if(sourceOfEvent.tagName == "INPUT" && sourceOfEvent.type == "text"){
                        return preventDefaultEventPropagation();
                    }
                }
        };

        var AltKeys = {
            keyCodes: [36, 37, 39], //Home, Left, Right
            modifiers: ['altKey'],
            callback: function(event){return preventDefaultEventPropagation();}
        };

        var CtrlKeys = {
            keyCodes: [66, 68, 69, 72, 73, 76, 78, 79, 82], //B, D, E, H, I, L, N, O, R
            modifiers: ['ctrlKey'],
            callback: function(event){return preventDefaultEventPropagation();}
        };

        addKeyActions([SingleKeys, BackspaceKeys, EnterKeys, AltKeys, CtrlKeys]);
});

Answer 2

如果您使用的是jQuery 2，“这个版本会留下旧的Internet Explorer 6,7和8浏览器。” [...] “但不要担心，jQuery团队仍然支持在IE 6/7/8上运行的1.x分支。“

http://blog.jquery.com/2013/04/18/jquery-2-0-released/

Answer 3

我不知道捕鼠器，但你可以查看被触发的事件的密码和stopPropagation等，这种方法可能对老版浏览器更友好，如果捕鼠器不支持它们（并且意味着你不需要另一个）库）。

$(window).on('keyup', function(event) {
     if (event.keyCode ===  19) { //19 is f5 in your example
         event.stopPropagation();
         //etc..
     }
});

或多个密钥代码，如

$(window).on('keyup', function(event) {

     var blockedKeys = [19, 18, 17]; 

     if (blockedKeys.indexOf(event.keyCode) > -1) {
         event.stopPropagation();
         //etc..
     }
});

有关密码代码的完整列表，请参阅here

Answer 4

我们设法用标准的javascript解决了这个问题，并通过执行以下操作来避免使用jquery和Mousetrap：

function preventBubbling(event){

    if(event.cancelBubble) event.cancelBubble = true;
    if(event.stopPropagation) event.stopPropagation();
    if(event.preventDefault) event.preventDefault();

    event.returnValue = false;
    event.keyCode = 0;
    return false;
}

document.onkeydown = function(){
    switch (event.keyCode){
    case 8: //Backspace
    case 13: //Enter
    case 114: //F3
    case 116: //F5
    case 121: //F10
    case 122: //F11
        return preventBubbling(event);

    case 66: //B+ctrl
    case 68: //D+ctrl
    case 69: //E+ctrl
    case 72: //H+ctrl
    case 73: //I+ctrl
    case 76: //L+ctrl
    case 78: //N+ctrl
    case 79: //O+ctrl
    case 82: //R+ctrl
        if(event.ctrlKey){
            return preventBubbling(event);
        }

    case 36: //Home +alt
    case 37: //Left +alt
    case 39: //Right +alt
        if(event.altKey){
            return preventBubbling(event);
        }
    }
}

在Chrome上运行的JQuery代码，但不是IE版本8.0.7601.17514

4 个答案: