Как обнаружить контроль + щелчок в Javascript из атрибута div onclick?

Ответ 1

Я бы рекомендовал использовать методы JQuery для keyup и keydown в документе, так как он нормализует коды событий, чтобы сделать одно решение crossbrowser.

Для правого клика вы можете использовать oncontextmenu, однако будьте осторожны, это может быть ошибкой в ​​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;
        }
    }


}

Ответ 2

В вашем обработчике проверьте объект window.event для свойства ctrlKey как таковой:

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

UPDATE: вышеупомянутое решение зависит от собственности собственности на объекте окна, который, возможно, не должен считаться существующим во всех браузерах. К счастью, теперь у нас есть рабочий проект широко поддерживается. Пример:

HTML

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

JS

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

То же самое относится к событиям клавиатуры

См. также KeyboardEvent.getModifierState()

Ответ 3

Поскольку прошло несколько лет с того момента, как этот вопрос был задан, другие ответы устарели или неполны.

Вот код для современной реализации с использованием 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
} ) ;

Ответ 4

Попробуйте следующее:

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
})

Ответ 5

При щелчке мышью 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

Ответ 6

Вы не можете определить, нажата ли клавиша после нажатия. Вы можете отслеживать только ключевые события в js. В вашем случае я предлагаю изменить onclick с помощью события нажатия клавиши, а затем определить, является ли он управляющим ключом по коду события, а затем вы можете добавить событие click.

Ответ 7

Попробуйте этот код,

$('#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');
   }
});

Извините, я добавил e.ctrlKey.

Ответ 8

Сверху только что отредактировано, так что он сразу работает

<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>

Ответ 9

чистый javascript:

var ctrlKeyCode = 17;

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;
        }
    }
}