检查“单击”上的 Ctrl / Shift / Alt 键事件

Question

我如何识别在以下代码中按下了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

我还发现了这篇关于浏览器中的 keypress、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');

});

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

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

当被调用时，它将返回 true 或 false。有关更多信息，请访问 https://developer.mozilla.org /en-US/docs/Web/API/MouseEvent/altKey

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

Answer 5

只是想我会添加一个适合 2020 年的答案。

---

您现在也可以使用 MouseEvent.getModifierState() 来实现此目的 - 它是 截至撰写本文时大多数浏览器都支持。

document.addEventListener("click", (evn) => {
  const shift = evn.getModifierState("Shift");
  const ctrl = evn.getModifierState("Control");
  const alt = evn.getModifierState("Alt");

  console.log("Mouse pressed! Modifiers:");
  console.table({shift, ctrl, alt});
});

注意事项：

• 值得注意的是，此 API 不区分左修饰符和右修饰符。如果你关心这一点，那你就不太走运了。但我想这只对少数用例重要。
• 此 API 的主要优点之一是它支持 shift、ctrl 和 alt 以外的修饰符。然而，由于固有的平台差异，不同操作系统之间的具体行为有些不稳定。在使用它们之前，请先检查此处。

Answer 6

根据我的评论，这是可能的解决方案。

要检查按下了哪个特定修饰键，您可以使用 KeyboardEvent Location (查看表格支持)

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

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

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

/* 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-Right 和 CTRL-Right 的快捷键。 ALT
  ）
• 同时按住两个相同的修饰键（例如 Shift-Left 和 Shift-Left
  Shift-Right 键），将导致仅处理第一个
  （似乎是默认浏览器行为，所以无论如何，似乎是正确的！）

Answer 7

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

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

Answer 8

比任何事情都简单：您使用 keydown 事件来检查它是否是 Ctrl (17) 或 Shift (16)，然后使用 keyup 事件来检查它是否是 Enter< /kbd> (13) 和 Ctrl 或 Shift 之前按下（按下键时）
取消任何按键上的 Ctrl 或 Shift，但 Enter 除外

Answer 9

效果就像一个魅力！ Chrome、Firefox、IE 和 Edge 上也支持 ;) https://jsfiddle.net/55g5utsk/2/< /a>

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 10

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