在'click'事件中检查Ctrl / Shift / Alt键

我怎么能确定在下面的代码中按下哪个 Ctrl / Shift / 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

我还在浏览器中发现了这个关于按键，按键，按键事件的文章。 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'); }); 

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

Answer 3

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

 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 4

在大多数情况下， ALT ， CTRL和SHIFT键布尔值将工作，看看这些键是否被按下。 例如：

 var altKeyPressed = instanceOfMouseEvent.altKey 

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

为了将来的参考，还有一个叫metaKey （NS / firefox只），当按下元键时工作。

Answer 5

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

这是一个testing，以显示你在找什么。 它还告诉你如何捕捉左，右，上，下键标准和数字键盘（数字2,4,6,8）的那些！ http://afro.systems.googlepages.com/test-static-08.html

Answer 6

按照我的评论 ，这是可能的解决scheme。

要检查按下哪个特定的修饰键，可以使用KeyboardEvent位置 （ 请参阅表格支持 ）

为了支持IE8，幸运的是你可以使用已经发布的解决scheme 。

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

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

 /* global variable used to check modifier keys held */ /* Note: if eg 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> 

Answer 7

比任何事情都更容易：使用keydown事件来检查它是Ctrl （17）还是Shift （16），然后使用keyup事件来检查它是否是Enter （13）和Ctrl或Shift命中之前（在键盘上）取消Ctrl或Shift在任何键盘上，但input

Answer 8

奇迹般有效！ 以及Chrome，Firefox，IE和Edge） 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)) }); 

以下是一个带有点击事件的版本 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=[]; }); 

Answer 9

有一些原因左右CTRL ， SHIFT和ALT键不区分，因为1.键码相同2.许多笔记本电脑键盘可能没有两个控制键采取参考： 如何判断一个事件是否来自右Ctrl键？