on click div 속성에서 자바스크립트에서 control+click 검출하는 방법?

on click div 속성에서 자바스크립트에서 control+click 검출하는 방법?

이 질문에는 이미 다음과 같은 답변이 있습니다.

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

닫힘5년 전에.

나는 사용자가 div 요소를 클릭하고 있는지, 아니면 CONTROL CLIGHTING하고 있는지 알아야 합니다.이벤트 청취자를 이용한 방법에 대한 예시를 보았습니다.하지만 내 코드는 이미 설정되어 있고, 클릭시 element 방식을 사용하고 있습니다.

HTML

 <div id='1' onclick='selectMe()'>blah</div>

JS

 function selectMe(){
         //determine if this is a single click, or a cntrol click 
    }

마우스 왼쪽 버튼 클릭인지 오른쪽 버튼 클릭인지도 알고 싶습니다.

핸들러에서 다음을 확인합니다.window.event속성에 대한 객체ctrlKey다음과 같은 경우:

function selectMe(){
    if (window.event.ctrlKey) {
        //ctrl was held down during the click
    }
}

업데이트: 위의 솔루션은 윈도우 개체의 고유 속성에 따라 달라지며, 모든 브라우저에 존재할 것으로 간주해서는 안 될 수도 있습니다.다행히도, 우리는 우리의 필요를 해결하는 실무 초안을 가지고 있고, MDN에 따르면, 그것은 널리 지지를 받고 있습니다.예:

HTML

<span onclick="handler(event)">Click me</span>

JS

function handler(ev) {
  console.log('CTRL pressed during click:', ev.ctrlKey);
}

키보드 이벤트도 마찬가지입니다.

참고 항목 키보드 이벤트.getModifierState()

2021 업데이트: 지금 이것을 할 수 있는 더 좋은 방법들이 있습니다.다른 답변들도 꼭 확인해 주시기 바랍니다.

이벤트 코드를 정규화하기 때문에 문서에 JQuery의 키업 및 키다운 방식을 사용하여 하나의 솔루션 크로스브라우저를 만들 것을 권장합니다.

오른쪽 클릭의 경우 상황에 맞는 메뉴를 사용할 수 있지만 IE8에서는 버그가 발생할 수 있으므로 주의해야 합니다.호환성 차트는 다음과 같습니다.

http://www.quirksmode.org/dom/events/contextmenu.html

<p onclick="selectMe(1)" oncontextmenu="selectMe(2)">Click me</p>

$(document).keydown(function(event){
    if(event.which=="17")
        cntrlIsPressed = true;
});

$(document).keyup(function(){
    cntrlIsPressed = false;
});

var cntrlIsPressed = false;


function selectMe(mouseButton)
{
    if(cntrlIsPressed)
    {
        switch(mouseButton)
        {
            case 1:
                alert("Cntrl +  left click");
                break;
            case 2:
                alert("Cntrl + right click");
                break;
            default:
                break;
        }
    }


}

이 질문이 처음 나온 지 몇 년이 지났기 때문에, 다른 답변들은 구식이거나 불완전합니다.

다음은 jQuery를 사용한 현대적인 구현 코드입니다.

$( 'div#1' ).on( 'click', function( event ) {
    if ( event.ctrlKey ) {
        //is ctrl + click
    } else {
        //normal click
    }
} );

우클릭 탐지는 다른 사용자가 올바르게 제공한 것인데 여기에 나열해서 한 곳에 모든 것을 담도록 하겠습니다.

$( 'div#1' ).on( 'contextmenu', function( event ) {
    // right-click handler
} ) ;

마우스가 있으면 ctrlKey를 클릭하면 e.ctrlKey로 액세스할 수 있는 이벤트 속성이 됩니다.Look down for example

$("xyz").click(function(e)){
  if(e.ctrlKey){
    //if ctrl key is pressed
  }
  else{
    // if ctrl key is not pressed
  }
}

참고: https://www.w3schools.com/jsref/event_key_keycode.asp

이 코드를 사용해 보세요.

$('#1').on('mousedown',function(e) {
   if (e.button==0 && e.ctrlKey) {
       alert('is Left Click');
   } else if (e.button==2 && e.ctrlKey){
       alert('is Right Click');
   }
});

ectrlKey를 추가했습니다.

시도해 보기:

var control = false;
$(document).on('keyup keydown', function(e) {
  control = e.ctrlKey;
});

$('div#1').on('click', function() {
  if (control) {
    // control-click
  } else {
    // single-click
  }
});

마우스 오른쪽 버튼을 클릭하면contextmenu이벤트, 그래서:

$('div#1').on('contextmenu', function() {
  // right-click handler
})

키를 누른 후에는 키가 다운되었는지 여부를 감지할 수 없습니다.js의 주요 이벤트만 모니터링할 수 있습니다.당신의 경우엔 당신을 바꾸자고 제안합니다.onclick키 누르기 이벤트와 함께 이벤트 키 코드로 컨트롤 키인지 탐지한 다음 클릭 이벤트를 추가할 수 있습니다.

위에서만 편집이 되어 바로 작동됩니다.

<script>
    var control = false;
    $(document).on('keyup keydown', function (e) {
        control = e.ctrlKey;
    });

    $(function () {
        $('#1x').on('click', function () {
            if (control) {
                // control-click
                alert("Control+Click");
            } else {
                // single-click
                alert("Single Click");
            }
        });
    }); 

</script>
<p id="1x">Click me</p>

순수 자바스크립트:

var ctrlKeyCode = 17;
var cntrlIsPressed = false;

document.addEventListener('keydown', function(event){
    if(event.which=="17")
        cntrlIsPressed = true;
});

document.addEventListener('keyup', function(){
    if(event.which=="17")
        cntrlIsPressed = true;
});



function selectMe(mouseButton)
{
    if(cntrlIsPressed)
    {
        switch(mouseButton)
        {
            case 1:
                alert("Cntrl +  left click");
                break;
            case 2:
                alert("Cntrl + right click");
                break;
            default:
                break;
        }
    }
}

언급URL : https://stackoverflow.com/questions/16190455/how-to-detect-controlclick-in-javascript-from-an-onclick-div-attribute