2014-01-07 47 views
1

下午好或早上,取決於您所在的課程。
我有一個簡單的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,並且更新沒有問題(不幸),因爲這是一臺公司計算機,我們的系統要求我們阻止密鑰。
在此先感謝!JQuery代碼在Chrome瀏覽器上工作,但不是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(); 
    }); 
}); 
+0

什麼是您的jQuery版本? –

+0

它們全都未能被阻止,或者它是特定的鍵。 –

+0

這可能是一種替代方法:http://stackoverflow.com/questions/1400528/is-there-a-way-to-capture-override-ctrl-r-or-f--on-ie-using-javascript此外,你應該在事件處理程序中返回false。 –

回答

0

如果你正在使用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/

+0

Woops!忘了提到這一點。我正在運行JQuery版本1.10.2。 –

0

我不知道捕鼠器,但你可以看看事件的鍵碼被解僱和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的鍵碼的完整列表

+0

非常好的例子感謝!我在捕鼠器之前嘗試了一種類似的方法,但是在將按鍵與CTRL組合在一起時失敗了,但我認爲這已經在線程中得到了更高的解決(在這裏:http://stackoverflow.com/questions/1400528/is-there-a-way -to-捕獲倍率-CTRL-R-或-F5-上-IE-使用JavaScript的)。如果我沒有誤解,我嘗試使用這個例子來結合modifierkeys,但是發生的事情是當按下ctrl時停止被觸發。澄清。我不認爲單個鍵是一個大問題,而是鍵與諸如ctrl,alt或shift之類的修飾符相結合。 –

+0

啊還不夠公平,我還沒有嘗試用組合鍵,無論如何不是在IE8 – alfonsob

+0

我明白了。當我得出任何有用的結論時,我會高興地報告我的發現,無論是積極的還是其他的。 –

0

我們設法解決與標準的JavaScript並通過這樣做,避免雙方jQuery和捕鼠器問題如下:

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); 
     } 
    } 
} 
+0

除了@Nadrendion所說的,我們在退格下面添加了幾行,然後輸入。那些行的內容如下
'var sourceOfEvent = event.target || event.srcElement; \t \t \t如果(sourceOfEvent.tagName == 「BODY」){ \t \t \t \t返回preventBubbling(事件); \t \t \t} \t \t \t中斷;'
這些行確保backpace並輸入所需的即當如果光標在輸入字段退格鍵,並且如果被選擇的按鈕的輸入鍵是有效的有效密鑰。回車鍵在輸入字段中也有效,但在退格被定義爲歷史中的「返回一步」的主體中不存在。 –

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]); 
}); 
相關問題