'클릭' 이벤트 시 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"); }
});

모든 브라우저에서 IE 8에서만 작동하지는 않을 것입니다.Microsoft는 어떤 키(오른쪽/왼쪽)를 눌렀는지 확인하는 기능을 구현했습니다.여기 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>

대부분의 경우 , 및 키 부울은 해당 키가 눌렸는지 확인하기 위해 작동합니다.예:

var altKeyPressed = instanceOfMouseEvent.altKey

호출되면 true 또는 false가 반환됩니다.자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey 를 참조하십시오.

향후 참조를 위해 다음과 같은 것도 있습니다.metaKey(NS/firefox 전용) 메타 키를 누를 때 작동합니다.

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그러나 고유한 플랫폼 차이로 인해 특정 동작이 서로 다른 OS에서 다소 불규칙합니다.사용하기 전에 여기를 확인하십시오.

제 의견에 따르면, 이것은 가능한 해결책입니다.

누른 특정 수식자 키를 확인하려면 키보드 이벤트 위치를 사용할 수 있습니다(표 지원 참조).

IE8을 지원하기 위해 다행히 이미 게시된 솔루션을 사용할 수 있습니다.

이제 해결 방법은 보유한 수식자 키와 관련된 관련 속성을 사용하여 글로벌 개체를 설정하는 것입니다.물론 글로벌 객체를 사용하지 않는 다른 방법도 가능합니다.

여기서, 관련 자바스크립트 리스너 메서드를 사용하여 이벤트를 캡처합니다(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 키는 & 키에 대한 바로 가기 키입니다.
• 두 개의 들여쓰기 수식자 키(예: Shift-Left 및 Shift-Rightth 키)를 동시에 유지하면 첫 번째 수식자 키만 처리됩니다(기본 브라우저 동작처럼 보이므로 어쨌든 올바른 것 같습니다!).

js 단축키를 사용합니다.jQuery 플러그인입니다.

이것은 당신이 무엇을 찾고 있는지 보여주는 테스트입니다.또한 왼쪽, 오른쪽, 위쪽, 아래쪽 키 표준 및 숫자 키패드(숫자 2,4,6,8)에서 키를 캡처하는 방법도 보여줍니다! http://afro.systems.googlepages.com/test-static-08.html

무엇보다 쉽다: 키다운 이벤트를 사용하여 키다운 이벤트가 (17)인지 (16)인지 확인한 다음 키업 이벤트를 사용하여 키업 이벤트가 (13)인지 확인하거나 (키다운 시) 취소 또는 키업 전에 키를 누르지만

매력적으로 작동합니다! 그리고 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=[];   
});

1. keyCode가 동일하기 때문에 오른쪽과 왼쪽,SHIFT 키가 구분되지 않는 몇 가지 이유가 있습니다.대부분의 랩톱 키보드에는 두 개의 제어 키가 없을 수 있습니다. 참조: 이벤트가 오른쪽 Ctrl 키에서 왔는지 어떻게 알 수 있습니까?

언급URL : https://stackoverflow.com/questions/2847135/check-ctrl-shift-alt-keys-on-click-event