在'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"); } }); 

9 Solutions collect form web for “在'click'事件中检查Ctrl / Shift / Alt键”

那么你这不会工作在所有的浏览器只是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'); } } }); 
 $('#someelement').bind('click', function(event){ if(event.ctrlKey) console.log('ctrl'); if(event.altKey) console.log('alt'); if(event.shiftKey) console.log('shift'); }); 

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

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> 

在大多数情况下, ALTCTRLSHIFT键布尔值将工作,看看这些键是否被按下。 例如:

 var altKeyPressed = instanceOfMouseEvent.altKey 

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

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

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

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

按照我的评论 ,这是可能的解决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> 

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

奇迹般有效! 以及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=[]; }); 

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

  • 从子窗口重新加载父窗口
  • 在jQuery UI中缺less图标
  • jQuery能否提供标签名称?
  • jQuery AJAX提交表单
  • 如何在禁用的button上启用引导工具提示?
  • 如何解决Uncaught TypeError:无法读取未定义的属性“原型”?
  • jQuery和AJAX响应头
  • .each()完成后调用jQuery函数
  • event.wheelDelta返回undefined
  • 获取元素的文本节点
  • JQuery更改内部文本,但保留HTML