检查Ctrl键/移位/ ALT键上 '点击' 事件

Question

我怎么能确定哪些按Ctrl/移位/Alt键键下面的代码按下？

$("#my_id").click(function() { 
    if (<left control key is pressed>) { alert("Left Ctrl"); } 
    if (<right shift and left alt keys are pressed>) { alert("Right Shift + Left Alt"); } 
}); 

Answer 1

那么你这不会在所有浏览器只工作于IE 8.微软实现了确定哪个（右/左）键被按下的能力。这里是一个链接http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx

我还发现这篇关于浏览器中的按键，keyup，keydown事件的文章。 http://unixpapa.com/js/key.html

$('#someelement').bind('click', function(event){ 

    if(event.ctrlKey) { 
     if (event.ctrlLeft) { 
     console.log('ctrl-left'); 
     } 
     else { 
     console.log('ctrl-right'); 
     } 
    } 
    if(event.altKey) { 
     if (event.altLeft) { 
     console.log('alt-left'); 
     } 
     else { 
     console.log('alt-right'); 
     } 
    } 
    if(event.shiftKey) { 
     if (event.shiftLeft) { 
     console.log('shift-left'); 
     } 
     else 
     { 
     console.log('shift-right'); 
     } 
    } 
    }); 

Answer 2

$('#someelement').bind('click', function(event){ 
    if(event.ctrlKey) 
     console.log('ctrl'); 
    if(event.altKey) 
     console.log('alt'); 
    if(event.shiftKey) 
     console.log('shift'); 

}); 

我不知道这是否是可能的检查click事件中左/右按键，但我不认为这是可能的。

Answer 3

使用js-hotkeys。它是一个jQuery插件。

这是一个测试，显示你在找什么。它还向您展示了如何捕获左，右，上，下键标准以及数字键盘（数字键盘2,4,6,8）的标准！ http://afro.systems.googlepages.com/test-static-08.html

Answer 4

比什么都更容易：你用keydown事件来检查它是否是按Ctrl（17）或移（16），你再使用keyup事件来检查它是否是输入（13）和按Ctrl或移击中前（上键不放） 取消Ctrl键或任何KEYUP 移但输入

Answer 5

以下my comment，这是可能的解决方案。

要检查哪些具体修改键被按下时，您可以使用KeyboardEvent Location（see table support）

为了支持IE8，幸运的你可以使用already posted solution。

现在，解决方法是设置一个全局对象，并在其中包含有关修改键的相关属性。当然，不使用全局对象的其他方法也是可能的。

在这里，我使用相关的JavaScript侦听器方法捕获事件（jQuery不支持捕获阶段）。我们捕获事件以处理事件传播因某些原因已被使用中的代码停止的情况。

/* global variable used to check modifier keys held */ 
 
/* Note: if e.g control left key and control right key are held simultaneously */ 
 
/* only first pressed key is handled (default browser behaviour?)*/ 
 
window.modifierKeys = (function() { 
 
    /* to handle modifier keys except AltGr which is key shortcut for controlRight + alt */ 
 
    var mKeys = {}; 
 
    /* to fire keydown event only once per key held*/ 
 
    var lastEvent, heldKeys = {}; 
 
    // capture event to avoid any event stopped propagation 
 
    document.addEventListener('keydown', function(e) { 
 
    if (lastEvent && lastEvent.which == e.which) { 
 
     return; 
 
    } 
 
    lastEvent = e; 
 
    heldKeys[e.which] = true; 
 
    setModifierKey(e); 
 
    }, true); 
 
    // capture event to avoid any event stopped propagation 
 
    document.addEventListener('keyup', function(e) { 
 
    lastEvent = null; 
 
    delete heldKeys[e.which]; 
 
    setModifierKey(e); 
 
    }, true); 
 

 
    function setModifierKey(e) { 
 
    mKeys.alt = e.altKey; 
 
    mKeys.ctrlLeft = e.ctrlKey && e.location === 1; 
 
    mKeys.ctrlRight = e.ctrlKey && e.location === 2; 
 
    mKeys.shiftLeft = e.shiftKey && e.location === 1; 
 
    mKeys.shiftRight = e.shiftKey && e.location === 2; 
 
    } 
 
    return mKeys; 
 
})(); 
 

 
/* on div click, check for global object */ 
 
$('.modifierKey').on('click', function() { 
 
    console.log(modifierKeys); 
 
    /* for demo purpose */ 
 
    $('.info').text(function() { 
 
    var txt = []; 
 
    for (var p in modifierKeys) { 
 
     if (modifierKeys[p]) txt.push(p); 
 
    } 
 
    return txt.toString(); 
 
    }); 
 
})

/* for demo purpose */ 
 

 
.info:not(:empty) { 
 
    border: 1px solid red; 
 
    padding: .1em .5em; 
 
    font-weight: bold; 
 
} 
 
.info:not(:empty):after { 
 
    content: " held"; 
 
    font-weight: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="modifierKey" tabindex="-1"> 
 
    DIV to catch modifier keys on click 
 
</div> 
 
<br> 
 
<span class="info"></span>

作为旁注：

• ALT GR关键是CTRL-右 & ALT 012的快捷键个键
• 控股同时在两个张玉峰修饰键（例如左移位01​​ 按住Shift键分辩键），将导致只有第一个被处理 （似乎是默认浏览器的行为，因此，无论如何，似乎是正确的！）

Answer 6

有一些原因，左，右CTRL，SHIFT & ALT键是没有区别，因为 1键编码是相同 2.许多笔记本键盘可能不会有两个控制键 采取一个参考： How can I tell if an event comes from right Ctrl key?

Answer 7

e.originalEvent.location左键返回1和2右键。因此，您可以按照以下方式检测按下哪个按键。希望这会帮助你。

var msg = $('#msg'); 
 
$(document).keyup(function (e) { 
 
     if (e.keyCode == 16) { 
 
      if (e.originalEvent.location == 1) 
 
       msg.html('Left SHIFT pressed.'); 
 
      else 
 
       msg.html('Right SHIFT pressed.'); 
 
     } else if (e.keyCode == 17) { 
 
      if (e.originalEvent.location == 1) 
 
       msg.html('Left CTRL pressed.'); 
 
      else 
 
       msg.html('Right CTRL pressed.'); 
 
     } else if (e.keyCode == 18) { 
 
      if (e.originalEvent.location == 1) 
 
       msg.html('Left ALT pressed.'); 
 
      else 
 
       msg.html('Right ALT pressed.'); 
 
     
 
      e.preventDefault(); //because ALT focusout the element 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Press modifier key: </label> 
 
<strong id="msg"></strong>

Answer 8

在大多数情况下，ALT，CTRL，并SHIFT键布尔将努力看是否被按这些键。例如：

var altKeyPressed = instanceOfMouseEvent.altKey 

当被调用时，它将返回true或false。欲了解更多信息，请登录https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey

为了将来的参考，还有一个叫做metaKey（仅限NS/firefox），它在按下元键时工作。

Answer 9

工程就像一个魅力！以及在Chrome，火狐，IE和锋芒太;）https://jsfiddle.net/55g5utsk/2/

var a=[]; 
function keyName(p){ 
    var cases = {16:'Shift',17:'CTRL',18:'Alt'}; 
    return cases[p] ? cases[p] : 'KeyCode: '+p; 
} 
function keyPosition(p){ 
    var cases = {1:'Left',2:'Right'}; 
    return cases[p] ? cases[p]+' ' : ''; 
} 
$('input').on('keydown',function(e){ 
    a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode)); 
}) 
$('input').on('keyup',function(){ 
    var c=''; 
    var removeDuplicates = []; 
    $.each(a, function(i, el){ 
     if ($.inArray(el, removeDuplicates) === -1) { 
      removeDuplicates.push(el); 
      c=c+(el)+' + '; 
     } 
    }); 
    a=[]; 
    alert(c.slice(0, -3)) 
}); 

之后，与click事件的版本 http://jsfiddle.net/2pL0tzx9/

var a=[]; 
function keyName(p){ 
    var cases = {16:'Shift',17:'CTRL',18:'Alt'}; 
    return cases[p] ? cases[p] : ''; 
} 
function keyPosition(p){ 
    var cases = {1:'Left',2:'Right'}; 
    return cases[p] ? cases[p]+' ' : ''; 
} 
$(document).on('keydown',function(e){ 
    a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode)); 
}) 
$('#my_id').on('click',function(){ 
    var c=''; 
    var removeDuplicates = []; 
    a =a.filter(function(v){return v!==''}); 
    $.each(a, function(i, el){ 
     if ($.inArray(el, removeDuplicates) === -1){ 
      removeDuplicates.push(el); 
      c=c+(el)+' + '; 
     } 
    }); 
    if (c) alert(c.slice(0, -3)); 
    a=[]; 
});