jQuery로 클릭 이벤트를 하는 동안 키가 눌렸는지 확인하려면 어떻게 해야 합니까?

jQuery로 클릭 이벤트를 하는 동안 키가 눌렸는지 확인하려면 어떻게 해야 합니까?

저는 jQuery로 클릭 이벤트를 잡고 키 누름 이벤트를 기반으로 콜백 기능 내에서 포크를 할 수 있도록 키를 동시에 눌렀는지 확인하고 싶습니다.

예를 들어,

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

이것은 가능한가요 아니면 가능하다면 어떻게 가능한가요?

이벤트 속성에서 쉬프트, 알트 및 컨트롤 키를 쉽게 감지할 수 있습니다.

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

자세한 속성은 Quicks mode를 참조하십시오.다른 키를 탐지하려면 클레투스의 답변을 참조하십시오.

및 를 사용하여 키 상태를 별도로 추적해야 합니다.

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

키 코드 목록 참조.이제 확인할 수 있습니다.

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});

자바스크립트만으로 사용할 수 있었습니다.

 <a  href="" onclick="return Show(event)"></a>

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }

@Arun Prasad의 천둥을 훔치지 않고 기본 작업을 중지하기 위해 재탕한 순수 JS 조각이 있습니다. 그렇지 않으면 CTL+클릭을 누르면 새 창이 열립니다.

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}

<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

let isCtrlClicked = false;
let selectedContainer = [];
document.addEventListener("keydown", function(e) {
  if (e.key === "Control") {
    isCtrlClicked = true;
  }
});

document.addEventListener("keyup", function(e) {
  if (e.key === "Control") {
    isCtrlClicked = false;
    selectedContainer.forEach(item => {
      item.elem.style.backgroundColor = "";
      item.elem.dataset.isAlreaySelected = "0";
      delete item.elem.dataset.position;
    });
    selectedContainer = selectedContainer.filter(item => item.active);
    console.log(selectedContainer);
    selectedContainer = [];
  }
});

const main = document.getElementById("main");
for (let i = 0; i < main.childElementCount; i++) {
  main.children[i].dataset.isAlreaySelected = "0";
  main.children[i].addEventListener("click", function(e) {
    const isAlreaySelected = e.currentTarget.dataset.isAlreaySelected;
    const position = parseInt(e.currentTarget.dataset.position);
    if (isCtrlClicked && isAlreaySelected == "0") {
      e.currentTarget.style.backgroundColor = "rgba(0,0,200,0.2)";
      selectedContainer.push({
        elem: e.currentTarget,
        active: true
      });
      e.currentTarget.dataset.position = selectedContainer.length - 1;
      e.currentTarget.dataset.isAlreaySelected = "1";
    } else {
      e.currentTarget.style.backgroundColor = "";
      if (position > -1) {
        e.currentTarget.dataset.isAlreaySelected = "0";
        delete e.currentTarget.dataset.position;
        selectedContainer[position].active = false;
      }
    }
  });
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  display: flex;
}

#main>div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: auto;
  text-align: center;
  border: 1px solid grey;
  width: 100px;
  height: 100px;
  margin: 1rem;
}

<div id="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

언급URL : https://stackoverflow.com/questions/2445613/how-can-i-check-if-a-key-is-pressed-during-the-click-event-with-jquery